Question

我想分屏只有两个div用于此目的写下这个HTML代码：

<div class="box">
           <div class="div1">
               <img src="../Content/45.png" style="width:auto;" />
           </div>
           <div class="div2">
               <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
           </div>
           <div class="clear"></div>
</div>

这是css风格：

<style>
        div.box {
          background: #EEE;
          height: 100px;
          width: 600px;
        }

        div.div1 {
          background: #999;
          float: left;
          height: 100%;
          width: 50%;
        }

        div.div2 {
          background: #666;
          height: 100%;
          width:50%;
          left:100px;
          float:right;
        }

        div.clear {
          clear: both;
          height: 1px;
          overflow: hidden;
          font-size: 0pt;
          margin-top: -1px;
        }
</style>

但是当我运行那个页面时，我看到了这个输出：

为什么我不能分屏？什么是正确的CSS？谢谢。

Answer 1

工作正常..

检查

https://jsfiddle.net/3d5mq1tf/

请更新小提琴..如果您发现缺少的东西..

div.box {
          background: #EEE;
          height: 100px;
          width: 600px;
        }

        div.div1 {
          background: #999;
          float: left;
          height: 100%;
          width: 50%;
        }

        div.div2 {
          background: #666;
          height: 100%;
          width:50%;
          left:100px;
          float:right;
        }

        div.clear {
          clear: both;
          height: 1px;
          overflow: hidden;
          font-size: 0pt;
          margin-top: -1px;
        }

<div class="box">
           <div class="div1">
               <img src="../Content/45.png" style="width:auto;" />
           </div>
           <div class="div2">
               <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
           </div>
           <div class="clear"></div>
</div>

Answer 2

你的代码正在处理渲染图像的位置，这将延伸到div的边界，因为你没有告诉它。

虽然您需要添加的唯一部分是图像宽度的部分，但我采取了自由并将其从基于浮动的布局转换为基于内联的布局，从而减少了标记和CSS，并且更好地控制了你正在做什么。

div.box {
  background: #EEE;
  height: 100px;
  width: 600px;
  white-space: nowrap;
}
div.box > div {
  display: inline-block;
  height: 100%;
  vertical-align: top;
  width: 50%;
}
div.box > div img {
  width: 100%;
}
.div1 {
  background-color: #999;
}
.div2 {
  background-color: #666;
}

<div class="box">
  <div class="div1">
    <img src="http://i.imgur.com/k8BtMvj.jpg" alt="test image" />
  </div><div class="div2"></div>
</div>

我怀疑您还希望图像的最大高度为100px，就像父容器一样。如果这样做，您可以在父容器上使用overflow: hidden，但最好将其渲染为背景图像，如下所示：

div.box {
  background: #EEE;
  height: 100px;
  width: 600px;
}
div.box > div {
  display: inline-block;
  height: 100%;
  vertical-align: top;
  width: 50%;
}
div.box > div img {
  width: 100%;
}
.div1 {
  background: #999 url('http://i.imgur.com/k8BtMvj.jpg') left top no-repeat;
  background-size: cover;
}
.div2 {
  background-color: #666;
}

<div class="box">
  <div class="div1"></div><div class="div2"></div>
</div>

这也显示了您应该使用background与background-color

的不同之处

为什么我不能在html中拆分两个div？

2 个答案: