Question

我有一个页面，顶部有两个图像，它们左右浮动，如下所示：

.floatLeft{ float:left;}
.floatRight{ float:right; }


    <div>
        <img src="firstImage"  class="floatLeft"/>
        <img src="secondImage" class="floatRight"/>

        <!-- wright here -->


    </div>

问题是当我在图像之后写任何东西（无论是div还是纯文本），如果它的页面宽度是，最大宽度后的文本在图像之后完全向下移动。那就是文本没有包裹在两个图像之间我对浮动的理解是文本应该在两个图像之间“流动”（除非我们使用清除哪个“清除”图像周围的区域），但它不像那样工作。我想在两个图像之间有一个文本。

任何帮助都非常受欢迎，因为我已经做了很多努力，但它无法正常工作。

Answer 1

逻辑上，这里有3个数据块，所以我建议使用3个具有设置宽度的浮动div：

.floatLeft{ float:left}
.div1{width:X%}
.div2{width:Y%}
.div3{width:Z%}
.overflow{overflow: hidden} /* this is optional */

<div class="overflow">
    <div class="floatLeft div1">
        <img src="firstImage"/>
    </div">
    <div class="floatLeft div2">
        <!-- text here -->
    </div">
    <div class="floatLeft div3"><!-- or make it float right if you want -->
        <img src="secondImage"/>
    </div">
</div>

如果您希望图像具有固定宽度，请尝试使用CSS calc：

.div1{width:100px}
.div2{width:-moz-calc(100%-300px);-webkit-calc(100%-300px);calc(100%-300px);} /* not supported in some browsers */
.div3{width:200px}

但老实说，我建议采用经典方式并在此处使用表格：

.table {width:100%;border-collapse:collapse}
.table td {padding:0;margin:0}
.block1 {width:X%} /* or width:Xpx */
.block3 {width:Z%} /* or width:Zpx */
/* do not touch block2 here */

<table class='table'>
    <tr>
        <td class='block1'>
            <img src="firstImage"/>
        </td>
        <td class='block2'>
            <!-- text here -->
        </td>
        <td class='block3'>
            <img src="secondImage"/>
        </td>
    </tr>
</table>

请记住将内容包装在“块”中，在标记时总是有帮助。

Answer 2

试试这种方式

<div>
<img src="firstImage"  class="floatLeft"/>
<p class="floatLeft">Some textgoes here</p>
<img src="secondImage" class="floatRight"/>
</div>

但要适当宽度

Answer 3

我想这就是你需要的答案jsfiddle

我会解释一下。在你的div中添加一类imgcontainer 在你的CSS中，添加以下

.imgcontainer{
    position:relative;
}

你可以添加div的宽度，在jsfiddle我把它设置为150px。每个图像都是50像素。在那里你添加一些带有文字的段落

Answer 4

另一个变体是使用igorpavlov提出的表格方法的CSS版本。你必须用div替换table / tr / td并按照这里的建议调整CSS：

.table {width:100%; display: table;}
div{ display: table-cell; vertical-align: top;}
.block1 {width:33%} /* or width:Xpx */
.block3 {width:33%} /* or width:Zpx */
img {width: 100%; height: auto;}

<div class='table'>
    <div class='block1'>
        <img src="firstImage"/>
    </div>

    <div class='block2'>
        <!-- text here -->
    </div>

    <div class='block3'>
        <img src="secondImage"/>
    </div>
</div>

它提供了更好的语义并且可以工作IE8 +！

CSS浮动问题

4 个答案: