首页 文章

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

提问于
浏览 次
0

我正在尝试对齐图像旁边的文本 . 我想说明没有空格的长字符串 .

我的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>
css html alignment word break

2 回答

  • 1

    你让你的 image_container 漂浮，但你的 itemdescription 不是;这意味着 itemdescription 将遵循"normal"页面流，所以当左边的空格是空闲时，它将使用它 . 要实现您想要的（我认为），您应该将每个块浮动并为它们分配大小，例如：

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

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

    唐't forget to set a size to parent'也是div，让它更有效;并阅读了一下CSS floats theory

    回复于
  • 0

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

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

相关问题