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％的重复大小？我尝试使用内联块并将相应的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浮动，但您的itemdescription不是;这意味着itemdescription将遵循“正常”页面流程，因此当左侧空间是空闲时，它将使用它。要实现您想要的（我认为），您应该将每个块浮动并为它们分配大小，例如：

.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

的内容

Answer 2

将.itemdescription设置为position：absolute和left：320; （假设你想在图像和文本之间留出一些空间）解决问题：

.itemdescription {
    word-wrap: break-word;
    display: inline;
    float:left;
    position:absolute;
    left:320px;
}

自动换行：打破单词中断到错误的div大小

2 个答案: