html - div 宽度 100% 不溢出到下一行

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;
     ...
 }

内边距增加了元素的宽度，因此降低了元素的宽度