HTML - div 旁边的文本没有给它一个固定的宽度

Question

我在一个 div 中嵌套了多个 div 元素。我想要的是 #title-text div 位于图像旁边 - 在本例中使用 float 。

问题是 div 中的文本在没有更多宽度空间时将 div 隔开，正如您在 this jsFiddle 中看到的那样.

我想使用 float ，因为会有多个使用相同类的图 block ，并且这些图 block 具有不同的大小和图像等。另外我不想让 #title-text 到有一个固定的宽度，因为多个瓦片使用它，因此具有不同的宽度。

这是 HTML:

<div id="tile-wrapper">
    <div id="category-text">
        <p class="category-content">Smartphones / software</p>
    </div>                        
        <div id="tile-image">
            <a href="#"><img src="images/wp10.jpg" class="tile-image" name="title" /></a>
        </div>
        <div id="title-text">
            <a href="#" class="title-text">Placeholder Text placeholder text placeholder text placeholder text</a>
        </div>
    <div id="date-time-text">
        <p class="date-time">3 minutes ago.</p>
    </div>
</div>

Answer 1

好的，所以首先我像这样在你的类中添加了内联显示

.tile-image {
margin: 0 auto;
display:inline;
}

.title-text {
margin: 0 5px 5px 0px;
font-weight: 300;
text-shadow: 1px 1px 3px rgba(0,0,0,.3);
text-decoration: none;
font-size: 22px;
color: black;
display:inline;
}

然后我在#title-text 上设置宽度和对齐方式

#title-text {
float: left;
margin-left: 5px;
margin-bottom:10px;
text-align:left;
width:50%;
}