html - 使 标签内的两个元素在同一行响应

Question

我想知道如何使标签内的 2 个 div 具有响应性，但同时元素必须保持在同一行上。现在右边的 div 低于第一个。这是我的 JSfiddle 示例:

http://jsfiddle.net/vladicorp/vzSsp/3/

代码:

<div id="design01">
<div id="titledesign01">Title</div>
                <ul>
                <li>
                <div id="designphoto01"><img src="http://www.emocool.com/work/01.jpg" ></div>
                </li>
                <li>
                <div id="designphoto04"><img src="http://www.emocool.com/work/03.jpg" ></div>
                </li>                
                </ul></div>

CSS:

   #design01 {
  display: block;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  float:left;   
}
#design01 ul {
    float:left;
    overflow:hidden;
    max-width: 100%;
    height:100%;
    list-style:none;
    padding:0px;
    padding:0px;    
}
#design01 ul li{
    float:left;
    position:relative;
    padding:0px;
}
#titledesign01 { 
    max-width: 100%;
    font: 18px/20px "HelvBold", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color:#fff;
    margin-left:20px;       
}
#designphoto04 {
    display: block;
    max-width: 100%;

}
#designphoto04 img{

    max-width: 100%    

}

#designphoto01 {

    display: block;
    max-width: 100%;

}

#designphoto01 img{

    max-width: 100%



}

Answer 1

你很接近。您只需将此 CSS 添加到您的 li 中即可使其正常工作:

width:50%;
margin:0;

可以调整这些值。基本上，我们告诉 CSS 让元素成为 ul 宽度的 50%。如果您将其设置为超过此值，它们将换行。或者，您可以将一个设置为 40%，另一个设置为 60%，这两个值只需相加为 100%(如果您添加了填充、边距或边框，则可能更少)。

Fiddle