Question

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

.div1{
    display: inline-block;
    width: 49%;
	border:1px solid red;
	height:250px;
}

.div2{
    display: inline-block;
    width: 49%;
	
	border:1px solid red;
}


.div3{
    display: inline-block;
    width: 49%;
	border:1px solid red;
	vertical-align:top;
	
}


.div4{
    display: inline-block;
    width: 49%;
	border:1px solid red;
}
</style>

<html>
<head>




</head>
<body>
 


 
 
 <div class="div1">
  some content1
</div><!-- 
--><div class="div2">
  some content2
</div><!-- 
--><div class="div3">
  some content3
</div><!-- 
--><div class="div4">
  some content4
</div>
 



<body>

</html>

column2和column4之间存在间隙，如何消除此差距。在第2列和第4列之间。我想附加图像以便理解一旦我想在div2之后对齐我的div4但是div2和div4之间有空格。

我想把我的div4放在div2之后。我是设计无法理解这种行为的新手。

Answer 1

试试这个：

* {
    box-sizing: border-box;
}

.col1, .col2 {
    width: 49%;
    position: absolute;
    display: inline-block;
}

.col2 {
    margin-left: 49%;
}

.div1, .div2, .div3, .div4 {
    width: 100%;
    border:1px solid red;
}

.div1 {
    height:250px;
}

<div class="col1">
    <div class="div1">some content1</div>
    <div class="div3">some content3</div>
</div>
<div class="col2">
    <div class="div2">some content2</div>
    <div class="div4">some content4</div>
</div>

内联块元素下一行不正确

1 个答案: