ヘッダーとして機能するタイトルの下にテキストと画像を並べようとしていますが、画像がエントリ間の仕切りを捨て続け、ページの配置を台無しにします。外観は次のとおりです (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]
これがどのようにレンダリングされるかのスクリーンショットを次に示します。
助言がありますか?私はフロントエンドの仕事の経験があまりありません (これはおそらく明らかです)。