Question

我想将＃inner2和＃inner3 divs并排放置。并且完全适合#outer div，以防浏览器窗口大小发生变化。 inner3并没有像我想要的那样漂浮得很好。它重叠。

这是我的代码： HTML：

<div id="outer">
  <div id="inner1">...</div>
  <div id="inner2">
     <asp:image .. src="some.jpg" cssClass="img"/>
  </div>
  <div id="inner3">
     //...
  </div>
</div>

Css：

#inner2{
    position:relative;
    width:25%;
    padding-bottom:25%;
    float:left;
    height:0;
}
.img {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
}
#inner3 {
    padding: 13px;
    width:70%;
    height:170px;
    margin-left:10px;
    margin-top:10px;
    position:absolute;
    left:5px;
    float:left;   
}

Answer 1

#inner2{
    width:25%;
    padding-bottom:25%;
    float:left;
    height:0;
}
.img {
    width:100%;
    height:100%;
}
.inner3 {
    padding: 13px;
    width:70%;
    height:170px;
    margin-left:10px;
    margin-top:10px;
    float:left;   
}

这应该是你的css

如果它们不在彼此旁边，则意味着您的填充和边距超过总宽度的5％宽度，因此请减少它们。

Answer 2

我不能评论由于没有足够的代表，但请注意.inner3是一个类选择器，而div得到id =“inner3”

Answer 3

我稍微更改了代码，以便更容易理解原则。

这是fiddle

基本上两个#inner元素（2和3）必须显示为块，而不是只将左边的一个浮动到左边，右边的一个浮动到右边：

HTML：

<div id="outer">
  <div id="inner1">1</div>
  <div id="inner2">2</div>
  <div id="inner3">3</div>
</div>

CSS：

#outer {
  background-color:#d2d2d2;
  width:100%;
}
#inner1, #inner2, #inner3 {
  display:block;
}
#inner2{
  height:170px;
  width:24%;
  float:left;
  background-color:rgba(170,120,50,0.5);
}
#inner3 {
  width:74%;
  height:170px;
  float:right;
  background-color:rgba(120,140,150,0.5);
}

儿童div定位css

3 个答案: