单行中的两个 div，右边的有一个图像，左边的一个拉伸并有一个居中的文本答案

【问题标题】：Two divs in the single line, the right one has an image, the left one stretches and has a centered text单行中的两个 div，右边的有一个图像，左边的一个拉伸并有一个居中的文本
【发布时间】：2015-09-10 18:47:28
【问题描述】：

右侧 div 包含固定大小的图像（例如 200x200 像素），并且必须始终贴在页面的右边缘。
左 div 从页面左边缘水平延伸到右 div。它的高度与右div相同，等于图像高度。
左 div 还必须有一些文本行垂直和水平居中（在左 div 内居中）。

+------------------------------------------+----------------------+
|left div (dynamic width)                  |right div (fixed dims)|
|                                          |                      |
|                   some                   |                      |
|             left-div-centered            |         image        |
|                   text                   |                      |
|                                          |                      |
+------------------------------------------+----------------------+

这可以用 CSS 完成吗？

【问题讨论】：

jsfiddle.net/gt3on73a

标签： html css

【解决方案1】：

灵活的盒子布局将有助于您的情况。

制作一个灵活的盒子容器来容纳左右 div。
给右边的框flex-grow: 0flex-shrink: 0和flex-basis: 200px，让它是静态的。
左边的盒子需要是可拉伸的，所以给它flex: 1，它会根据容器而增长和收缩。
可以使用justify-content: center 和align-items: center 实现文本的水平和垂直居中

.container {
  display: flex;
}
.right {
  display: flex;
  flex: 0 0 200px;
}
.left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 0;
  background: #6EAFF7;
}

<div class="container">
  <div class="left">
    Centered Text
  </div>
  <div class="right">
    <img src="http://placehold.it/200x200">
  </div>
</div>

【讨论】：

display: flex 是 +1 的最佳选择，请注意 browser compatibility (such as IE11+ only)

【解决方案2】：

display: flex 是一种很棒的现代方式。如果compatibility is a major concern，则不能越过display: table。

外包装，在本例中为 <body> 本身，被赋予 display: table 和 table-layout: fixed 以确保正确的 div 保持固定宽度
两个内部 div 都给出了display: table-cell
左边的 div 被指定为vertical-align: middle，并且会根据右边的 div 的高度随着图像的增加而增长和缩小

示例

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  display: table;
  table-layout: fixed;
  width: 100%;
}
body > div {
  display: table-cell;
  background: #F00;
}
img {
  display: block;
}
.left {
  background: #F90;
  vertical-align: middle;
  text-align: center;
}
.right {
  width: 200px;
}

<div class="left">
  Text
</div>
<div class="right">
  <img src="http://www.placehold.it/200X300" />
</div>

【讨论】：

【解决方案3】：

工作样本 - http://jsfiddle.net/h11erm2r/

HTML

<div class="container">
    <div class="right"><img src="http://fakeimg.pl/250x100/"></div>
    <div class="left">
        <div>Hello world!</div>
    </div>    
</div>

CSS

.container > div {
    border: solid 2px #888;
    height: 100px;
}

.left > div {
    display: inline-block;
    vertical-align: middle;
}

.left {
    text-align: center;
}

/*trick for vertical alignment*/
.left:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;    
}

.right{
    width: 250px;
    float: right;
}

【讨论】：

请记住，使用这种方法，左 div 不会随着右 div 的高度增加；您需要明确设置它的高度。

【解决方案4】：

你应该创建一个float div 和margin-right div：jsfiddle

<style>
    .pull-right {
        float: right;
        width: 200px;
    }

    .dynamic-left {
        margin-right: 200px;
        text-align: center;
    }
</style>

<div class="clearfix">
    <div id="image" class="pull-right">
        <img src="">
    </div>
    <div id="text" class="dynamic-left">
        <span>Centered text</span>
    </div>
</div>

【讨论】：

请记住，使用这种方法，左 div 不会随着右 div 的高度增长；您需要明确设置它的高度。

【解决方案5】：

@Artem 看看这个：https://jsfiddle.net/0u4f51z1/1/

 <div class="container">
    <div class="left">
    Ut leo dui, egestas at ultricies quis, feugiat in mauris. Curabitur nisi diam, tempus non viverra condimentum, iaculis luctus justo. Sed bibendum sit amet ante quis aliquam.
    </div>
    <div class="right">
        <img src="http://www.deftune.com/wp-content/uploads/2010/10/thexx-400x400.jpg"/>
    </div>
 </div>

css

.container {
  width: 600px;
  float:left;
}

.left {
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  float: left;
  text-align: center;
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.right {
  box-sizing: border-box;
  width: 200px;
  float: left;
}

.right img {
  width: 200px;
  height: 200px;
}

【讨论】：