1

float是否可以在不使用但仅将同一行中的三个图像对齐到左、中和右text-align？

4

2 回答 2

1

有一种方法可以做到这一点text-align: justify，它的工作原理如下：

假设您有以下 HTML：

<div class="wrap">
    <img src="http://placekitten.com/120/100">
    <img src="http://placekitten.com/120/100">
    <img src="http://placekitten.com/120/100">
    <span class="filler"></span>
</div>

应用以下 CSS：

.wrap {
    border: 1px solid blue;
    text-align: justify;
    line-height: 0;
    height: 100px; /* option if you need tighter wrap of the border or background color */
}
.wrap img {
    vertical-align: top;
}
.filler {
    display: inline-block;
    width: 100%;
    font-size: 0px;
    vertical-align: top;
}

该.filler元素需要使用display: inline-block并被赋予 100% 的宽度。这会导致其他内联元素（图像）均匀分布在父元素的宽度上。

有时，您可能会在包含图像的行框的底部边缘下方看到一个额外的空白区域，但您可以通过将字体大小设置为 0px 并将垂直对齐到顶部来消除它。

参见演示：http: //jsfiddle.net/audetwebdesign/AnYxC/

注意：
有些人喜欢使用伪元素来添加填充元素。但是，如果您不介意额外的标记，我的示例可以正常工作。

于 2013-09-07T22:04:13.700 回答
0

您可以创建 3 个宽度相等的 div，然后将每个图像放在自己的 div 中，然后您可以按照自己的意愿对齐它们。

   <div id="container">
   <div id="left"><img src="image1.png" /></div>
   <div id="center"><img src="image2.png" /></div>
   <div id="right"><img src="image3.png" /></div>

   #left,#right,#center {width:300px;}
   #left{text-align:left;float:left;}
   #center {text-align:center;float:left;}
   #right {text-align:right;float:left;}

您必须浮动 div，但您仍在为图像使用文本对齐。

于 2013-09-07T21:54:27.813 回答