使用 CSS 将包含动态文本长度的对象放置在其父对象之外

Question

我希望这不是一个愚蠢的问题，但我已经在这个问题上纠结了很长时间，因此决定寻求答案。

我正在尝试以页面为中心实现以下目标：

[[动态变化的文字][img][其他文字]]

左侧文本的长度不应影响整个块的居中性质。

无论周围有什么文字，图像都应位于屏幕中央。

我尝试在左侧文本上使用负翻译，这实现了效果，但在文本字符串改变长度时不会缩放。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.wrapper {
  border: 1px solid green;
  left: 50%;
  position: absolute;
}

.long-text {
  border: 1px solid yellow;
  display: inline-block;
  transform: translateX(-100%);
}

.image-block {
  border: 1px solid blue;
  display: inline-block;
  transform: translatex(-100%);
}

<div class="wrapper">
  <span class="long-text">Longer text goes in here</span>
  <div class="image-block">
    <img src="http://fakeimg.pl/30x30" alt="" />  
    <span>Shorter text</span>
  </div>
</div>

有什么想法吗？

Answer 1

像这样？你需要 .wrapper 成为 span

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrap {
  text-align: center;
}

.wrapper {
  border: 1px solid green;
  margin: 0 auto;
  display: inline-block;
}

.long-text {
  border: 1px solid yellow;
  display: inline-block;
}

.image-block {
  border: 1px solid blue;
  display: inherit;
  /*transform: translatex(-100%);*/
}

<div class="wrap">
  <span class="wrapper">
  <span class="long-text">Longer text goes in here</span>
  <div class="image-block">
    <img src="http://fakeimg.pl/30x30" alt="" />
    <span>Shorter text</span>
  </div>
  </span>
</div>

Answer 2

请尝试使用打击码

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrap {
  text-align: center;
  width:100%
}

.wrapper {
  border: 1px solid green;
  margin: 0 auto;
  display: inline-block;
}

.long-text {
  border: 1px solid yellow;
  display: inline-block;
  width:49%;
}

.image-block {
  border: 1px solid blue;
  display: inline-block;
  width:50%;
  vertical-align: top;
  /*transform: translatex(-100%);*/
}
.image-block img {
float: left;
}
.image-block divv {
padding-top: 5px;
}

<div class="wrap">
  <span class="wrapper">
  <span class="long-text">Longer text goes in here sdffdssdfsdssdf Longer text goes in here sdffdssdfsdssdf Longer text goes in here sdffdssdfsdssdf Longer text goes in here sdffdssdfsdssdf</span>
  <div class="image-block">
    <img src="http://fakeimg.pl/30x30" alt="" />
    <div>Shorter text</div>
  </div>
  </span>
</div>

Answer 3

通过设置 flex:1，可以使用 Flexbox 轻松实现图像左侧和右侧块的宽度相等：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.wrapper {
  border: 1px solid green;
  display: flex;
}
.wrapper > span {
   flex: 1;
}

.long-text {
  border: 1px solid yellow;
  text-align: right;
}

.image-block {
  border: 1px solid blue;
  display: inline-block;
}

<div class="wrapper">
  <span class="long-text">Longer text goes in here</span>
  <div class="image-block">
    <img src="http://fakeimg.pl/30x30" alt="" /> 
  </div>
  <span>Shorter text</span>
</div>

是您要找的吗？

使用 CSS 将包含动态文本长度的对象放置在其父对象之外

Using CSS to place an object outside of its parent that contains dynamic text length

html

css

css-transforms