Question

我正在努力成为一名更好的HTML编码器，所以我决定摆脱桌面布局。而是使用div布局，但我正在使用div来定位问题。

在我的页面上，我正在尝试向它们添加三个图像和文本，但它们不会使用float对齐，而是它们是级联的。

这是我的标记：

<style>
.left
{
   float: left;
}
</style>
</head>
<body>
<div class="left">
    <img src="Images/image.JPG" alt="" class="left" /> 
    </div>
     <div>
         some text
    </div>

    <div class="left">
    <img src="Images/image.JPG" alt="" class="left" />
    </div>
    <div>
        some text
    </div>

    <div class="left">
        <img src="Images/image.JPG" alt=""  class="left" />
    </div>
    <div>
        some text
    </div>
</body>

我希望你们中的一个人可以指出问题，（帮助！我不想回到讨厌的桌子！:)）

这是一张图片：

enter image description here

编辑：我想垂直对齐

Paul Roub的回答是最接近的，但只需要将它们分开。

Answer 1

根本不需要divs。试试这个 HTML ：

<img src="Images/image.JPG" alt="" class="left" /> 
some text

<img src="Images/image.JPG" alt="" class="left" /> 
some text

<img src="Images/image.JPG" alt="" class="left" /> 
some text

此 CSS 可将文字与图片顶部对齐：

.left {
    vertical-align: top;
}

修改：
如果你想在图片之间留一些空间，那么你的CSS应该是这样的：

.left { vertical-align: top; margin-bottom: 10px; /* that gives you 10px of space at the bottom of an image*/ }

这是完整解决方案的jsfiddle。

Answer 2

另一种方法：将文本和图像div左移，并清除图像上的浮动：

.left {
  float: left;
  clear: left;
}

.left + div {
 float: left;
}

示例：http://codepen.io/paulroub/pen/knbBJ

Answer 3

不确定这是否是你想要的，但这是一个小提琴：

http://jsfiddle.net/gGxEn/

HTML：

<div class="left">
    <p><img src="Images/image.JPG" alt="" width="100px" height="100px" class="left" />someusce consequat ipsum nunc, nec condimentum dui cursus id. Ut consequat scelerisque urna, non porttitor tortor blandit vitae. Fusce scelerisque sem congue risus condimentum.
</p>
    </div>

    <div class="left">
    <p><img src="Images/image.JPG" alt="" width="100px" height="100px" class="left" />some usce consequat ipsum nunc, nec condimentum dui cursus id. Ut consequat scelerisque urna, non porttitor tortor blandit vitae. Fusce scelerisque sem congue risus condimentum.
</p>
    </div>

    <div class="left">
    <p><img src="Images/image.JPG" alt="" width="100px" height="100px" class="left" />someusce consequat ipsum nunc, nec condimentum dui cursus id. Ut consequat scelerisque urna, non porttitor tortor blandit vitae. Fusce scelerisque sem congue risus condimentum.
</p>
    </div>

CSS：

.left
{
   float: left;
    width:33%;
}

.left img{
    padding:5px;
}

如果您希望将它们叠加在一起，请将clear:both添加到left类。

这是另一个小提琴：

http://jsfiddle.net/gGxEn/1/

Answer 4

您的文字需要在浮动的div中

<div class="left">
 <img src="Images/image.JPG" alt="" class="left" /> 
 text
</div>

<div class="left">
 <img src="Images/image.JPG" alt="" class="left" />
 text
</div>

<div class="left">
 <img src="Images/image.JPG" alt=""  class="left" />
 text
</div>

Answer 5

最好的方法是浮动：左，然后清除：两者。

<style>
    .inline { float:left; }
    .clear { clear:both; }
</style>
</head>
<body>
    <div class="inline">
        <img src="http://umbra.nascom.nasa.gov/images/latest_aia_171_icon.gif">
        <p><center>Text 1</center></p>
    </div>
    <div class="inline">
        <img src="http://umbra.nascom.nasa.gov/images/latest_aia_171_icon.gif">
        <p><center>Text 2</center></p>
    </div>
    <div class="inline">
        <img src="http://umbra.nascom.nasa.gov/images/latest_aia_171_icon.gif">
        <p><center>Text 3</center></p>
    </div>
    <br class="clear">
</body>

您可以看到示例here。我希望它有效。

Answer 6

哟想要something like this?

<强> CSS

.img {
    height: 100px;
    width: 200px;
    overflow: hidden;
    border: 2px solid black;
    float: left;
}

<强> HTML

<div class="img"><img src="http://i.imgur.com/fqct5Us.gif"></div>
<p>Lorem ipsum dolor.</p>
<div class="img"><img src="http://i.imgur.com/fqct5Us.gif"></div>
<p>Lorem ipsum dolor.</p>
<div class="img"><img src="http://i.imgur.com/fqct5Us.gif"></div>
<p>Lorem ipsum dolor.</p>

它非常简单，只是不要浮动文本容器。

你如何向左边浮动div？

6 个答案: