CSS使图像和文本从左到右

Question

我想在左侧制作图片，在右侧制作文字。

这是一个jsfiddle http://jsfiddle.net/VnnZ2/

我将图像放在带有imageClass类的div中，并将文本放在带有类information的div中，并给imageClass左浮动和information右浮动。

我也试图做到这一点：

display: inline-block;

对于这两个类，但仍然是您在jsfiddle中看到的结果。

我用label和input尝试了相同的CSS，它可以工作，但是我不知道为什么它不能与div和div一起工作。

另外，我已经给imageClass了200的宽度，将informaton类设置为300的宽度和ul宽度500px，所以我尝试了

更新1

对不起，我错误地给了您错误的jsfiddle，这是正确的http://jsfiddle.net/VnnZ2/9/

Answer 1

您需要清除浮点数才能停止父元素崩溃。 有很多方法。 这可能是最简单的理解：

工作演示

<li>
    <div class="imageClass">
        <img src="https://www.google.com/images/srpr/logo11w.png"/>
    </div>
    <div class="information">nameres</div>

    <div class="clearfix"></div> /* Add an empty element with class .clearfix */
</li>

在您的CSS中：

.clearfix {
    clear: both;
}

---

或这种方法：

工作演示

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

将clearfix类应用于父元素（ li ）的位置

Answer 2

检查此更新的代码

HTML：

div class="allRestaurants">
        <ul>
        <li>
            <div class="imageClass">
                <img src="https://www.google.com/images/srpr/logo11w.png"/>
            </div>
            <div class="information">
                nameres                </div>
        </li>
    </ul>
        <ul>
        <li>
            <div class="imageClass">
                <img src="https://www.google.com/images/srpr/logo11w.png"/>
            </div>
            <div class="information">
                Zuma 2                </div>
        </li>
    </ul>
</div>

CSS：

.allRestaurants{
   background-color: #376b66;
   width:100%;
   float:left;
 }
 .allRestaurants ul{
   margin: 10px;
   padding: 0;
   width: 600px;
   background-color: #ffffff;
   margin-left: 10px;
   width:90%;
   overflow:auto;
 }
 .allRestaurants ul li{
    margin-bottom: 10px;
    list-style: none;
    box-sizing: border-box;
    border-radius: 10px;
    -webkit-border-radius: 10px;
 }
 .allRestaurants ul li .imageClass{
    float: left;
 }
 .allRestaurants ul li .imageClass img{
    width: 200px;
    height: 200px;
 }

 .allRestaurants ul li .information{
    width: 250px;
 }
 .allRestaurants ul li{
    float:left;    
    clear:both;
 }

更新了JS密码

Answer 3

添加overflow: auto; 到.allRestaurants ul li ，这样li就会知道其中存在浮动的元素。

另外，检查此更新的Fiddle 。