Question

我正在尝试将文本和图像排列在作为标题的标题下方，但图像不断丢弃条目之间的分隔符并弄乱页面的对齐方式。这是它的样子（这里使用Django模板）

以下是代码：

<script src="/static/js/downloadEntry.js" type="text/javascript"></script>
{% for entry in entries %}
  <div class="entry">
      <label class="titleText">{{ entry.title }}</label>
      <div class="contentContainer">
        {% if entry.image %}
            <img class="image" src="{{ entry.image.url }}">
        {% endif %}
        <p class="contentText">{{ entry.content }}</p>
      </div>
      <script>styleTitle("{{ entry.title }}");</script>
  </div>
  <hr class="entryDivider">
{% endfor %}

相关的CSS：

.entryDivider {
    margin-top: 10px;
    size: 1px;
    width: 66%;
}
.entry {
    width: 66%;
    margin-top: 30px;
    margin-bottom: 10px;
}

 .titleText {
    font-family: "Helvetica Neue";
    font-size: 24px;
    font-weight: bold;
    color: #666666;
    text-align: left;
    font-style: normal;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
 }

.contentContainer {
    width:100%;
    display: block;
}

.contentText {
    font-family: "Helvetica Neue";
    font-size: 14px;
    text-align: left;
    font-weight: 200;
    display: block;
    overflow: hidden;
}

.image {
    float: left;
    display: block;
    background-color: #ff0000;
    margin-right: 15px;
    width: 90px;
    height: 80px;
}

我尝试了几种不同的技术无济于事。理想情况下它看起来像这样： http://jsfiddle.net/cSazm/5/，但在div容器内。类似的东西：

[Title]
[Image, if one exists] [Content]
[Divider]

以下是如何呈现此内容的屏幕截图：

screenshot

有什么建议吗？我对前端工作没有多少经验（可能很明显）

Answer 1

在您的div（在这种情况下为.entry）中，您可以clear：

.entry {
    width: 66%;
    margin-top: 30px;
    margin-bottom: 10px;
    clear: both;
}

但是，我建议使用称为clearfix的内容：

.entry::after {
    content: '';
    display: table;
    clear: both;
}

这样，.entry之后的任何内容都会自动清除。

作为旁注，我建议删除hr元素并使用border-bottom上的.entry。

请参阅jsFiddle。

Answer 2

这是你在找什么？

.content {
width: 100%;
}

.image {
    float: left;
    padding-right: 5px;
}

.entryDivider {
    margin-top: 10px;
    size: 1px;
    width: 66%;
}

http://jsfiddle.net/XZ2Ax/

将所有内容放在分隔符上方的div中。

Answer 3

浮动元素后，你应该有一个清除元素，以便浮动不要＆＃34;混合＆＃34;

CSS

.clearfix {
   clear:both;
   height:0px;
}

HTML

<div>
    <img src="http://lorempixel.com/g/80/80/"  />

    <p>
    Lorem ipsum dolor sit amet, 
    </p>

</div>    
<br class="clearfix" />
<div>
    <img src="http://lorempixel.com/g/80/80/"  />

    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
    </p>

</div>

JSFiddle

Answer 4

这是你想要做的吗？ JSFiddle

div{
    display: block; 
    width: 100%;
    overflow: hidden;
    padding:10px 10px 0;
}    

h2 {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 5px;
}
img{
    float:left;
    margin-right: 10px;
    vertical-align:top;
}    

p{
    display: block;
    overflow: hidden;    
}    

div hr {
    clear: both;
    border: none;
    padding-top: 5px; 
    margin:0;
    border-bottom: 1px solid #ccc;
}

在CSS中将文本与图像对齐

4 个答案: