单行中有两个div，右边有一个图像，左边有一个图像，有一个居中的文本

The right div contains an image of fixed size (e.g. 200x200px) and must be always sticked to the right edge of the page.

右侧div包含固定大小的图像(例如200x200px),并且必须始终粘贴在页面的右边缘。

The left div stretches horizontally from the left page edge to the right div. It's height is the same as of right div and is equals to image height.

左侧div从左页边缘到右侧div水平拉伸。它的高度与右边的div相同,等于图像高度。

Left div also must have some lines of text centered both vertically and horizontally (centered inside left div).

左边div也必须有一些文本行垂直和水平居中(在左边div中心)。

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

Can this be done with CSS?

这可以用CSS完成吗?

5 个解决方案

#1

Working sample - http://jsfiddle.net/h11erm2r/

工作样本 - 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;
}

#2

Flexible box layout will help in your situation.

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

Make a flexible box container to hold the left and right divs.

制作一个灵活的盒子容器来容纳左右div。

Give the right box flex-grow: 0 flex-shrink: 0 and flex-basis: 200px so that it is static.

给右框flex-grow:0 flex-shrink:0和flex-basis:200px,这样它就是静态的。

The left box needs to be stretchable, so give it flex: 1 which grows and shrinks according to the container.

左边的盒子需要是可拉伸的,所以给它flex:1根据容器增长和收缩。

Horizontal and vertical centering of the text can be done using justify-content: center and align-items: center

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

#3

You should create a float div and margin-right div: jsfiddle

你应该创建一个浮点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>

#4

display: flex is the awesome, modern way. If compatibility is a major concern, you can't go past display: table.

display:flex是一种很棒的现代方式。如果兼容性是一个主要问题,则无法通过display:table。

The outer wrapper, in this case <body> itself, is given display: table and table-layout: fixed to ensure the right div is kept the fixed width

外包装器,在本例中为本身,给出显示:table和table-layout:fixed以确保正确的div保持固定宽度
Both inner divs are given display: table-cell

两个内部div都显示:table-cell
The left div is given vertical-align: middle and will grow and shrink its height based on the right div which grows its height with the image

左边的div被赋予vertical-align:middle,并且将根据右边的div增长和缩小它的高度,右边的div增加了它与图像的高度

Example

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

#5

-1

@Artem take a look on this: https://jsfiddle.net/0u4f51z1/1/

@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;
}

#1

Working sample - http://jsfiddle.net/h11erm2r/

工作样本 - 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;
}

#2

Flexible box layout will help in your situation.

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

Make a flexible box container to hold the left and right divs.

制作一个灵活的盒子容器来容纳左右div。

Give the right box flex-grow: 0 flex-shrink: 0 and flex-basis: 200px so that it is static.

给右框flex-grow:0 flex-shrink:0和flex-basis:200px,这样它就是静态的。

The left box needs to be stretchable, so give it flex: 1 which grows and shrinks according to the container.

左边的盒子需要是可拉伸的,所以给它flex:1根据容器增长和收缩。

Horizontal and vertical centering of the text can be done using justify-content: center and align-items: center

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

#3

You should create a float div and margin-right div: jsfiddle

你应该创建一个浮点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>

#4

display: flex is the awesome, modern way. If compatibility is a major concern, you can't go past display: table.

display:flex是一种很棒的现代方式。如果兼容性是一个主要问题,则无法通过display:table。

The outer wrapper, in this case <body> itself, is given display: table and table-layout: fixed to ensure the right div is kept the fixed width

外包装器,在本例中为本身,给出显示:table和table-layout:fixed以确保正确的div保持固定宽度
Both inner divs are given display: table-cell

两个内部div都显示:table-cell
The left div is given vertical-align: middle and will grow and shrink its height based on the right div which grows its height with the image

左边的div被赋予vertical-align:middle,并且将根据右边的div增长和缩小它的高度,右边的div增加了它与图像的高度

Example

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

#5

-1

@Artem take a look on this: https://jsfiddle.net/0u4f51z1/1/

@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;
}

秒客网

单行中有两个div，右边有一个图像，左边有一个图像，有一个居中的文本

5 个解决方案

#1

#2

#3

#4

Example

#5

#1

#2

#3

#4

Example

#5

相关文章