Question

我想要我的div

-------------------------------
|div A                        |
-------------------------------
|div B                        |
-------------------------------
|div C                        |
-------------------------------

https://jsfiddle.net/apss/tqap7oc3/

到这个

-------------------------------
|div A         |div B         |
-------------------------------
|div C                        |
-------------------------------

我知道这可能是一个非常简单的问题。对不起！因为它float:left或display:inline都没有问题。帮助我。

Answer 1

＆＃13;

.firstColumn, .subColumn{
  border-radius: 8px;
  border: 2px solid #18786C;
  padding: 5px;
  box-sizing: border-box;
float: left;
width: 100%;
}
.firstColumn {
width: 50%;
}
.subColumn:nth-child(2){
width: 50%;
}
.subColumn:nth-child(3){
  border-top: none;
}

＆＃13;

	<div>
		<div class = "firstColumn" >
		aaa
		</div>
		<div class = "subColumn" >
		bbb
		</div>
		<div class = "subColumn" >
		ccc
		</div>
</div>

＆＃13;

Answer 2

这是我的解决方案。如果可能的话，我更喜欢内联块而不是浮动。

＆＃13;

.topColumn {
    width: 46%;
    display: inline-block;
  border-radius: 8px;
  border: 2px solid #18786C;
  padding: 5px;
}

.subColumn {
  border-radius: 8px;
  border: 2px solid #18786C;
  padding: 5px;
  border-top: none;
}

＆＃13;

	<div>
        <div class="firstRow">
			<div class = "topColumn" >
			aaa
			</div>
			<div class = "topColumn" >
			bbb
			</div>
        </div>
			<div class = "subColumn" >
			ccc
			</div>
	</div>

＆＃13;

https://jsfiddle.net/eyfksp46/3/

Answer 3

有很多方法可以做到，例如使用float。

.firstColumn, .subColumn {width: 200px; float: left;}
.subColumn + .subColumn {clear: left; width: 414px;}

https://jsfiddle.net/tqap7oc3/4/

宽度以像素为单位，您可以使用所需的内容，例如。百分之，无论如何。

Answer 4

我已经实现了一个名为＆＃34; half＆＃34;并添加到＆＃34; firstColumn＆＃34;和第二个＆＃34; subColumn＆＃34;。

.half{
    display: inline-block;
    width: 200px;
    border-top: 2px solid #18786C;
    margin-bottom: 4px;
}

Working demo

Answer 5

＆＃13;

//add to css class
.firstColumn {
    float:left;
}

.subColumn {
    float:right;
}

＆＃13;

Answer 6

HTML：

<div>
    <div class = "firstColumn" >
    aaa
    </div>
    <div class = "subColumn" >
    bbb
    </div>
    <div class = "subColumn" >
    ccc
    </div>
</div>

CSS：

.firstColumn, .subColumn{
  border-radius: 8px;
  border: 2px solid #18786C;
  padding: 5px;
  box-sizing: border-box;
float: left;
width: 100%;
}
.firstColumn {
    width: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.subColumn:nth-child(2){
    width: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.subColumn:nth-child(3){
  border-top: none;
}

https://jsfiddle.net/apss/tqap7oc3/3/

如何让div对齐？

6 个答案: