水平浮动div重叠

Question

我设计了一个包含以下css My Fiddle

的表单

.leftdiv
{
  float: left;
  width: 46%;
}
.rowdiv
{
  margin-bottom: 4px;
  clear: both;
  width: 80%;
}
    .rightdiv
    {
        float: left;
        width: 36%;
    }

当我最大化屏幕时，div重叠如下，所以有些人可以帮助我如何更改css，以便在最大化或缩小屏幕时应显示相同的内容，文本框宽度应相同且标签文本可以包装...

Answer 1

你有没有调整你的div标签类的CSS？

实施例：  HTML：

<div class="textbox">

</div>

CSS：

.textbox{
margin-right:5%;
}

Answer 2

Demo为您的输入添加宽度：

input { width: 100%; }

Answer 3

我觉得你的设计很简单......你使用的clear:both，float:left太多了。这个问题的原因之一可能是每个div的宽度分配，错误的div层次宽度计算有时会导致重叠。而且你的设计和你的jsfiddle中的css非常混乱和复杂。

我正在给你一个新的小提琴链接。我创造了一个像你一样的设计。我的div结构是

.container->.wrapper->rowdiv-> leftdiv & rightdiv

我的css开发此设计的关键因素是display: table display: table-row display: table-cell

这里.wrapper是一个表，它可以有很多行，.rowdiv，每行可以有两个单元格.leftdiv＆amp; .rightdiv

您的设计中有三个表是另一个表，这就是为什么我在float:left中使用.wrapper

<强> My FIDDLE

Answer 4

尝试使用display：inline-block或display：inline，而不是浮动元素。这是处理问题的更好方法。