0

我正在努力成为一个更好的 html 编码器，所以我决定摆脱表格布局。并改用 div 布局，但我在使用 div 定位东西时遇到问题。

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

这是我的标记：

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

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

这是一张图片：

在此处输入图像描述

编辑：我想垂直对齐它们

Paul Roub 的答案是最接近的，但只需将它们分开即可。

4

6 回答 6

3

你根本不需要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。

于 2013-09-24T18:01:21.440 回答
1

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

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

.left + div {
 float: left;
}

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

于 2013-09-24T17:59:56.447 回答
1

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

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/

于 2013-09-24T18:04:23.760 回答
0

你想要这样的东西吗？

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>

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

于 2013-09-24T19:02:43.770 回答
0

您的文本需要在浮动 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>
于 2013-09-24T17:53:58.707 回答
0

最好的方法是让 float:left 然后 clear:both。

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

您可以在此处查看示例。我希望它有效。

于 2013-09-24T18:11:57.917 回答