Question

我有两个<ul>而我的第二个<ul>遇到问题，即<ul>内容更多。

在第二个<ul>中，我的最后一行出现在左边，不会出现在倒数第二行的下方。

喜欢这样：

enter image description here

有人知道如何正确对齐吗？

我的jsfiddle 有问题：

我的HTML

 <div id="example">
                    <img src="images/image1.jpg" width="180" height="170" />
                    <h2>1º ul</h2>
                    <ul>
                        <li>Here I have two list items:</li>
                        <li><strong>List item 1:</strong> content of list item 1</li>
                        <li><strong>List Item 2</strong>content of list item 2</li>
                    </ul>
                    <div id="clear"></div>
                     <img  src="images/image2.jpg" width="180" height="170" />
                    <h2>2º ul</h2>
                    <ul>
                        <li>Here I have four list items:</li>
                        <li><strong>List item 1</strong> content of list item 1</li>
                        <li><strong>Penultimate line</strong> This is my penultimate line and works fine but next line wont work fine because exceeds the height of image I guess, but my image needs to have this height</li>
                        <li><strong>This is a litem item with more content then the others and its not working fine </strong> because my last line is not below the penultimate line, somebody there knows how I can solve this situation?</li>
                    </ul>
                </div>

我的HTML

   <div id="example">
                <img src="images/image1.jpg" width="180" height="170" />
                <h2>1º ul</h2>
                <ul>
                    <li>Here I have two list items:</li>
                    <li><strong>List item 1:</strong> content of list item 1</li>
                    <li><strong>List Item 2</strong>content of list item 2</li>
                </ul>
                <div id="clear"></div>
                 <img  src="images/image2.jpg" width="180" height="170" />
                <h2>2º ul</h2>
                <ul>
                    <li>Here I have four list items:</li>
                    <li><strong>List item 1</strong> content of list item 1</li>
                    <li><strong>Penultimate line</strong> This is my penultimate line and works fine but next line wont work fine because exceeds the height of image I guess, but my image needs to have this height</li>
                    <li><strong>This is a litem item with more content then the others and its not working fine </strong> because my last line is not below the penultimate line, somebody there knows how I can solve this situation?</li>
                </ul>
            </div>

我的css：

#example {width:700px; height:auto;  font-size:16px; margin:15px 0 0 0; }
#example img{float:left; margin-right:10px; }
#example h2{color:#444; font-size:18px; }
#example p{ text-align:justify; font-size:16px; margin-top:10px; }
#clear{clear:both; margin-top:30px;}
#example ul {list-style:none;}
#example  ul li {margin-top:5px;}

Answer 1

你是在悬挂缩进之后，但这并不是浮动周围元素的工作方式。

它们在技术上都是从相同的left点开始，但它们被推到浮动图像的右侧。一旦浮动的图像结束，就没有什么能阻止内联文本从它应该的位置开始：在块级容器的最左边。

您需要设置一个框以将元素推离浮动图像：

http://jsfiddle.net/8UQeF/4/

#example .hanging-indent { margin-left: 190px; }

Answer 2

尝试使用：

#example ul {list-style:none;float:left;margin:0;padding:0;width:60%}

使用此解决方案，您可以添加所需的所有文本。

Answer 3

不知道我的问题是否正确，但现在这样。

只需在图像底部添加一些填充。

 <img  src="images/image2.jpg" width="180" height="170" style="padding-bottom:40px;" />

（是的，也许不是内联，但你得到了想法）

像这样：http://jsfiddle.net/8UQeF/3/

再次，抱歉，如果我误解了你的问题

Answer 4

这个jsFiddle怎么样？

我只是添加了一个

margin-bottom: -15px;

到h2元素

我的文字没有正确对齐

4 个答案: