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 { 
    border: 1px solid; 
    overflow:hidden; 
    padding: 20px; 
    background-color: #E1DFD9; 
} 

参见：http://jsfiddle.net/thirtydot/TqHkp/

这样做，你不需要指定任何width上#design_right_content优势。

这是一个重大进步，如果你想使这个流体宽度：http://jsfiddle.net/TqHkp/1/

Answer 2

试着改变你的#design_right_content这样：

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

的填充增加了一个元素的宽度，因此碰撞下来