如何在增加边距时防止色谱柱在相互之间移动？

  • Z时代
  • 2024-01-10
  • 分类：问答

CSS如何在增加边距时防止色谱柱在相互之间移动？

.container{ 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
} 
.col-md-4 { 
    background-color: #1A1919; 
    margin: 5px; 
}

HTML

<div class="container"> 
     <div class="row"> 
      <div class="col-md-4">1x1</div> 
      <div class="col-md-4">1x2</div> 
      <div class="col-md-4">1x3</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4">2x1</div> 
      <div class="col-md-4">2x2</div> 
      <div class="col-md-4">2x3</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4">3x1</div> 
      <div class="col-md-4">3x2</div> 
      <div class="col-md-4">3x3</div> 
     </div> 
    </div>

我需要的列和行之间的空间基本3x3的引导电网。但我无法做到。每当我使用边界时，第三列在第一列下方移动，它们不以3x3方式排列。为什么这会发生？

回答：

我认为问题出在你的CSS上。属性弹性方向设置不正确。

检查这个小提琴，并告诉我它是否回答你的问题。 https://jsfiddle.net/cqevhh2u/flex-direction: row;

回答：

Whenever I use the margin the 3rd column moves beneath the first one因为引导类col-md-4具有宽度33.3%所以如果你给保证金，第三个会在下一行，因为会有因为保证金没有为它提供33.3%宽度。相反，请使用另一个div作为内容，并为此留出空间。

.container {  
    text-align: center;  
    display: flex;  
    flex-direction: column;  
}  
.content {  
    background-color: #1A1919;  
    color: white;  
    padding: 5px;  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
<div class="container">  
    <div class="row">  
    <div class="col-md-4">  
     <div class="content">1x1</div>  
    </div>  
    <div class="col-md-4">  
     <div class="content">1x2</div>  
    </div>  
    <div class="col-md-4">  
     <div class="content">1x3</div>  
    </div>  
    </div>  
    <div class="row">  
    <div class="col-md-4">  
     <div class="content">2x1</div>  
    </div>  
    <div class="col-md-4">  
     <div class="content">2x2</div>  
    </div>  
    <div class="col-md-4">  
     <div class="content">2x3</div>  
    </div>  
    </div>  
    <div class="row">  
    <div class="col-md-4">  
     <div class="content">3x1</div>  
    </div>  
    <div class="col-md-4">  
     <div class="content">3x2</div>  
    </div>  
    <div class="col-md-4">  
     <div class="content">3x3</div>  
    </div>  
    </div>  
</div>

回答：

引导3切换到使用填充了槽沟，而不是边缘。所以，内容是分开的，但框不是。您需要使用内部元素来包装单元格内容。

.container {  
    text-align: center;  
    display: flex;  
    flex-direction: column;  
}  
.box1 {  
    background-color: #1A1919;  
    margin: 5px;  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />  
<div class="container">  
    <div class="row">  
    <div class="col-md-4">  
     <div class="box1">1x1</div>  
    </div>  
    <div class="col-md-4">  
     <div class="box1">1x2</div>  
    </div>  
    <div class="col-md-4">  
     <div class="box1">1x3</div>  
    </div>  
    </div>  
    <div class="row">  
    <div class="col-md-4">2x1</div>  
    <div class="col-md-4">2x2</div>  
    <div class="col-md-4">2x3</div>  
    </div>  
    <div class="row">  
    <div class="col-md-4">3x1</div>  
    <div class="col-md-4">3x2</div>  
    <div class="col-md-4">3x3</div>  
    </div>  
</div>

回答：

使用CSS电网A自举少溶液。

.container {  
    text-align: center;  
    display: grid;  
    grid-template-columns: 1fr 1fr 1fr;  
    grid-template-rows: auto;  
}  
.row > div{  
    background-color: gray;  
    margin: 5px;  
}

<div class="container">  
    <div class="row">  
    <div>1x1</div>  
    <div>1x2</div>  
    <div>1x3</div>  
    </div>  
    <div class="row">  
    <div>2x1</div>  
    <div>2x2</div>  
    <div>2x3</div>  
    </div>  
    <div class="row">  
    <div>3x1</div>  
    <div>3x2</div>  
    <div>3x3</div>  
    </div>  
</div>

回答：

如您不应该在列class.Do使用保证金..

.background { 
background-image: url("marakele-elephant1.jpg"); 
background-size: 100%; 
background-repeat: no-repeat; 
background-position-y: bottom; 
} 
html, body, .background { 
height: 100%; 
} 
.container{ 
text-align: center; 
display: flex; 
flex-direction: column; 
width: 698px; 
margin:auto; 
} 
.row{ 
width: 100%; 
margin: auto; 
} 
.col-md-4 { 
background-color: #D8C8C8; 
border-style: solid; 
border-width: 1px; 
width: 230px; 
height: 230px; 
}

以上是 如何在增加边距时防止色谱柱在相互之间移动？ 的全部内容， 来源链接： utcz.com/qa/263111.html

回到顶部