Question

我需要定位3个div，如下图所示：到目前为止，我接近“浮动”，但我无法专门实现此结果。

这是我目前的结果：

<head>
<style>
#div-container {
width: 500px;
height: 500px;
border: 1px solid #000000; 
}
.div1 {
width: 200px;
height: 100px;
border: 1px solid #d1d1d1;
}
.div2 {
width: 200px;
height: 100px;
float: left;
border: 1px solid #d1d1d1;
}
.div3 {
width: 100px;
height:200px;
float: left;
border: 1px solid #d1d1d1;
}
</style>
</head>
<body>
<div id="div-container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>

这就是我想做的事情：

divs image

JSFiddle：http://jsfiddle.net/5zkctxb9/

Answer 1

这是一种方法 - 将两个左手div放在一个div中，然后浮动它。

＆＃13;

#div-container {
  width: 500px;
  height: 500px;
  border: 1px solid #000000;
}
#inner {
  width: 200px;
  height: 200px;
  border: 1px solid #d1d1d1;
  float: left;
}
.div1 {
  width: 198px;
  height: 98px;
  border: 1px solid #d1d1d1;
}
.div2 {
  width: 198px;
  height: 98px;
  border: 1px solid #d1d1d1;
}
.div3 {
  width: 100px;
  height: 200px;
  float: left;
  border: 1px solid #d1d1d1;
}

＆＃13;

<div id="div-container">
  <div id="inner">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>
  <div class="div3">div3</div>
</div>

＆＃13;

Answer 2

向div3添加：margin-top:-100px;。 http://jsfiddle.net/xwdhppv5/

定位3个div：2行1列

2 个答案: