css - 两个 float div 和非文本元素的问题

Question

我创建了一个包装器 div (ctccon)，其中有两个 div 都向左浮动，因此它们彼此相邻。这工作正常，直到我在右侧 div (conright) 中添加图像或表格，然后添加的元素被推到左侧 div (conleft) 下方。

我的CSS

.ctccon {
    font-family: 'Comfortaa', cursive;
    color:  #8c8c8c;
    overflow: hidden;
}

.ctccon .conleft {

    float:left;
    width:40%;
    font-size:0.7em;

}

.ctccon .conright {
    float:left;
    font-size:1em;
}

还有我的html(没有添加元素)

<div class="ctccon">
    <div class="conleft"> This is the left div </div>
    <div class="conright">This is the right div </div>
</div>

添加元素

<div class="ctccon">
    <div class="conleft"> This is the left div </div>
    <div class="conright">This is the right div <img src="pic1.jpg"> </div>
</div>

我知道这可能是我不理解重新 float 的东西，但我还没有找到解决方案。任何指针？

-----更新------ 从那以后，我删除了图像并在 conright 中添加了一张 table 。仍然遇到与下图相同的问题:

Answer 1

最好分享错误的图片，但是:

我用图像和表格重新创建了您的代码，但它没有被推送到另一个 div 的底部。

但是让我解释一下您可能会发生什么:

1:你有2个div被推到左边，如果其中一个有空间，它会把自己放在你另一个div的下面，为什么？ because is pushed left!, 如果它被向左推并且旁边没有任何东西。它将占用该空间并执行预期的操作，向左浮动。

2:如果你想让你的 div 保持在右边，把你的 css 代码 float RIGHT，它会在右边忽略你的左边的 div(只要它不占据整个屏幕)。

3:如果您的图像占用的空间超过另一个 div 可用空间的 60%，它将被推送到按钮以适应图像。

为了解决您的问题，我认为您可以将此添加到您的 conright div 中的代码中:

.ctccon .conright {
   float:left;
   font-size:1em;
   width: 60%;   
}

为什么要这样？，因为如果你不指定这个 div 的宽度，它的内容占用的空间超过 60%，它会被推到底部

如果这不能回答您的问题，请提供您的错误图片。