如何在宽度为百分比内对齐div相邻

我正在尝试使响应式布局。在两个不同的li元素中有两个<div>。我想调整他们的屏幕变化和媒体查询的具体大小。我要他们往下走。如果我把它们的宽度设为像素，它们就会挨近但如果我把宽度设为百分比它们就会互相重叠。我怎样才能使它们的宽度在百分比上不重叠?请看这张单子。由于

#btmIconsDiv {
  float: left;
  margin-top: 84px;
  width: 100%;
  height: 341px;
  background-color: orange;
  position: relative;
}
#btmIconsDiv ul li {
  display: inline-block;
  list-style-type: none;
  margin-left: 30px;
}
#btmIconsDiv ul li div.btmIconsUlliDiv {
  float: left;
  width: 274px;
  height: 300px;
  background-color: red;
  border: 1px solid blue;
}

<div id="btmIconsDiv">
  <ul>
    <li>
      <div class="btmIconsUlliDiv"></div>
    </li>
    <li>
      <div class="btmIconsUlliDiv"></div>
    </li>
  </ul>
</div>

jsFiddle https://jsfiddle.net/mohsinali/mucs2ep3/1/

try this

#btmIconsDiv ul
{
    width: 100%;
    display: inline-block;
    margin: 0px;
    margin-top: 10px;
}
#btmIconsDiv ul li{  
    width: 45%;
    display: inline-block;
    list-style-type: none;  
}
#btmIconsDiv ul li div.btmIconsUlliDiv{    
    float: left;
    width: 100%;
    /*margin-right: 50px;*/
    height: 300px;
    background-color: red;
    border: 1px solid blue;
}

我认为它们重叠的原因是浮动左值。使用float没有什么害处，因为它很有用，但这是相当常见的情况。我建议尝试的第一件事是设置溢出:隐藏;有人建议溢出:auto;但隐藏是我使用的，当我有潜水不正确对齐，它总是工作!祝你好运!

在CSS3中，你可以使用calc属性，它允许你加减百分比:

#btmIconsDiv{
  float: left;
  margin-top: 84px;
  width: 100%;
  height: 341px;
  background-color: orange;    
  position: relative;
}
#btmIconsDiv ul li{  
  width: calc(50% - 32px); // 50% and minus 30px of margin right + 2px of border...
  display: inline-block;
  list-style-type: none;  
  margin-right: 30px; // user margin right instead of left...
}
#btmIconsDiv ul li div.btmIconsUlliDiv{    
  float: left;
  width: 100%;
  /*margin-right: 50px;*/
  height: 300px;
  background-color: red;
  border: 1px solid blue;
}

https://jsfiddle.net/mohsinali/mucs2ep3/1/

修改一下这个css

#btmIconsDiv ul li{  
 display: inline;// you have to correct this
 list-style-type: none;  
 margin-left: 30px;       
 }

1。更新

对于左边框问题使用

#btmIconsDiv
{
float: left;
margin-top: 84px;
width: 100%;
height: 341px;
background-color: orange;    
position: relative;
display:table;           // add this 
}

你可以把它作为更新小提琴

您可以使用Flex来解决您的问题，试试下面的代码。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    #btmIconsDiv {
      float: left;
      margin-top: 84px;
      width: 100%;
      height: 341px;
      background-color: orange;
      position: relative;
    }
    #btmIconsDiv ul {
      display: flex;
      list-style-type: none;
    }
    .btmIconsUlliDiv {
      float: left;
      width: 274px;
      height: 300px;
      background-color: red;
      border: 1px solid blue;
    }

    </style>
    </head>
    <body>
    <div id="btmIconsDiv">
      <ul>
        <li>
          <div class="btmIconsUlliDiv"></div>
        </li>
        <li>
          <div class="btmIconsUlliDiv"></div>
        </li>
         <li>
          <div class="btmIconsUlliDiv"></div>
        </li>
      </ul>
    </div> 
    </body>
    </html>

相关内容

最新更新

热门标签：