Question

<div id="transport">
    <div id="design_header">

    </div>
    <div id="design_image">
    </div>
    <div id="design_right_content">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries<br />
        <ul id="design_list">
            <li>one</li>
            <li>
                two</li>
            <li>
                three</li>
            <li>
                four</li>
        </ul>

   </div>
</div>

#design_right_content{
border: 1px solid;
float: left;
width: 400px;
overflow:hidden;
padding: 20px;
background-color: #E1DFD9;
display: inline;
 }
#transport{
border: 1px solid;
float: right;
width: 800px;
overflow: hidden;
background-color: #E1DFD9;
margin: 0px;
padding: 0px;
}
#design_header{
width: 100%;
overflow: hidden;
margin-top: 0px;
padding: 10px;
background-color: #006A4D;
height: 20px;
color: #ffffff;
clear:both;
float:left;
}
#design_image{
border: 1px solid;
float: left;
width: 300px;
min-height: 300px;
overflow: hidden;
display: inline;
background-color: orange;
}

对于上面的方法，有一种方法可以让div design_right_content具有宽度：100％而不会被转移到下一行吗？

Answer 1

尝试将#design_right_content更改为：

#design_right_content{
     ...
     width: 360px;
     ...
 }

填充增加了元素的宽度，因此将其撞击

Answer 2

你可以（稍微有点）通过简单地移除一堆属性来做到这一点。

将#design_right_content更改为：

#design_right_content {
    border: 1px solid;
    overflow:hidden;
    padding: 20px;
    background-color: #E1DFD9;
}

请参阅： http://jsfiddle.net/thirtydot/TqHkp/

这样做的好处是您无需在width上指定任何#design_right_content。

如果你想制作这种流畅的宽度，那么这是一项重大改进：http://jsfiddle.net/TqHkp/1/

div宽度100％，没有溢出到下一行

2 个答案: