首页 文章

水平对齐div并完全符合父级[duplicate]的宽度

提问于
浏览
0

这个问题在这里已有答案:

我试图水平对齐4个div,但我希望每个div填充父级宽度的25%,这样他们就完全填写了父级宽度 .

你可以在这里看到我的尝试:https://techsource.dk/query/combine.php

我有4个宽度为250px的div,没有填充,边距和边框,在1000px宽度父级内,但250px div中只有3个适合父级 .

如果我将子项的宽度设置为240px或更低,它们将适合父项,但我不明白为什么4x250px宽度div不能适合1000px宽度父项?我用chrome检查了它,浏览器似乎正确理解了它 .

6 回答

  • 0

    您使用 inline-block 将div放在同一行 . 如果代码中有空格,则会在标记之间添加空格 . 尝试在子容器上使用 float:left ,或者更恰当地说,在容器中使用 display:flex

    .container
    {
        display:flex;
        width:1000px;
    }
    
  • 0

    因为你有 inline-block to the 4 child elements creates a gap in between the inline-block elements .

    所以要通过代码删除它,只需设置

    font-size: 0px;
    

    到宽度为 1000px 的div,它将解决您的问题 .

  • 0

    问题在于 inline-block 显示样式 . 它会在元素之间添加空白区域 .

    内联格式上下文中的元素将导致回车中的空格和HTML中的空格

    引用StackOverflow上另一个问题的评论:inline-block

    我还建议你不要在子元素上使用固定的px宽度 . 但使用百分比 . 这样你肯定他们将永远保持在一排4 .

    FlexBox是设计样式时的方法 . 它易于使用和理解 . 在这里查看文档 - > FlexBox

    话虽如此,请查看下面的代码段

    .parent {
      display:flex;
      flex-wrap:wrap;
      flex-direction:row;
    }
    .child {
      flex: 0 25%;
      height:100px;
      background:red;
      border:1px solid green;
      box-sizing:border-box;
    }
    
    <div class="parent">
      <div class="child">
    
      </div>
      <div class="child">
    
      </div>
      <div class="child">
    
      </div>
      <div class="child">
    
      </div>
    </div>
    

    OBS我使用 box-sizing 因为我也在元素上使用了 border . 框大小调整使边框包含在元素的宽度中 . 不在它之外 . 它在你的情况下是无关紧要的,但我用它来分离元素 .

  • 0

    包含你在宽度1000px处设置的div - 在其上放置一个类来定位它,例如

    .containerswrapper {
       display:flex;
    }
    
    div[id^=Container] {
       flex: 0 0 25%;
    /* which is short for : 1. don't grow, 2. don't shrink, basis width 25% */
    }
    
  • 0

    如果在子div上使用box-sizing:border-box,则可以在1000px容器中容纳4个250px宽度的div . 这包括填充和div宽度的边框,否则它们将溢出到新行 .

    .parent{
       width:1000px;
       border:solid green 4px;
    }
    
    .child{
       border:solid darkblue 1px;
       background:lightblue;
       width:250px;
       height:300px;
       float:left;
       box-sizing:border-box;
    }
    
    .parent::after{
       content:" ";
       display:table;
       clear:both;
    }
    
    <div class="parent">
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
    </div>
    
  • 1

    我同意@Ruddle使用 flex ,因为它在实现漂亮的布局时更加优雅和灵活 .

    这是我创建的一个例子https://codepen.io/anon/pen/VEgegK

相关问题