css - 自动换行 : break-word breaks to wrong div size

Question

我正在尝试对齐图像旁边的文本。我想考虑没有空格的长字符串。

我的css如下

.new_item {
width: 100%; 
float: left;
border-bottom: 1px solid #990000; 
margin: 0 auto;
}

.image_container {
padding: 2px 2px;
height: auto;
float: left;
width: 300px;
}

.itemdescription {
word-wrap: break-word;
display: inline;

}

包含单个长字符串的文本描述仍然被强制放在 image_container 下方，因为(我认为)“word-wrap: break-word”正在将单词打断到容器的宽度。

如何强制描述 div 紧挨着图像 div？容器 div 的宽度为 60%，图像始终为 300px。如何将 div 调整为 60% 的 remanding 大小？我尝试使用内联 block 并将相应的 div 左右浮动。

编辑:还包括上面容器 div 的 CSS。

<div class="item_list">
                    <div class="new_item">
                    <div class="name">
                        <h2>Clock</h2><h4>$132</h4>
                    </div>
                    <div class="item_info"> 
                        <div class="image_container"><img src="images/image001.jpg" class="image"></div>
                        <div class="itemdescription">This       early 1800's winding design uses a leaf-spring click on the spokes of the wheel, to hold the weight that runs the clock. The power of the weight is transferred to the click.

Eventually, the shock of winding caused one of the original clicks to fail at a weak    point. Following the original maker's concept, a stronger replacement was made and installed.

The completed repair, ready to install - and good for another century of use. $132 </div>
                    </div>  
                    </div>
<div class="new_item">
                    <div class="name">
                        <h2>Litte</h2><h4>$832.2</h4>
                    </div>
                    <div class="item_info"> 
                        <div class="image_container"><img      src="images/HDR1.jpg" class="image"></div>
                        <div         class="itemdescription">LittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebi   rdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebird $832.2 </div>
                    </div>  
                    </div>      </div>

Answer 1

您使您的 image_container float ，但您的 itemdescription 不是；这意味着 itemdescription 将遵循“正常”页面流，因此当左侧空间空闲时，它将使用它。为了实现你想要的(我认为)，你应该将每个 block float 并分配它们的大小，例如:

.image_container {
    padding: 2px 2px;
    height: auto;
    float: left;
    width: 300px;
}

.itemdescription {
    display: block;
    float: left;
    overflow: hidden;
    width: 400px;
    word-wrap: break-word;
}

不要忘记也为父级的 div 设置一个大小，以使其更好地工作；并阅读一些关于 CSS floats theory 的内容