使用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

使在左，对从图像相等宽度的右块可以与Flexbox的可以容易地实现，将其设定flex:1：

* { 
 
    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>

是它你寻找什么？

Answer 2

是否是这样的？你需要.wrapper是跨度

* { 
 
    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 3

请尽量使用打击代码。

* { 
 
    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>