堆栈内存溢出
  繁体   English   中英

CSS-如何水平对齐div？

[英]CSS - How do I align my divs horizontally?

 原文  2018-05-04 11:40:12  2   11    html/ css

问题描述

我是HTML / CSS初学者，他想创建四个彩色框并将它们水平对齐。 我能够分别构建这四个盒子。 但是，我必须将第2-4个框注释掉，因为它们彼此重叠。 这个社区中有人可以解决我的newb问题吗？

div最终应该看起来像下图所示：

在此处输入图片说明

这是我的代码： 

 body { } #box-grey { background-color: grey; height: 200px; width: 200px; } #box-grey #box-orange { background-color: orange; height: 50%; width: 50%; display: inline-block; position: relative; fixed: 100px; left: 100px; } /* #box-black { background-color: black; height: 200px; width: 200px; } #box-black #box-yellow { background-color: yellow; height: 50%; width: 50%; display: inline-block; position: relative; top: 100px; left: 100px; } #box-blue { background-color: blue; height: 200px; width: 200px; } #box-blue #box-green { background-color: green; height: 50%; width: 50%; display: inline-block; position: relative; top: 100px; right: 0px; } #box-purple { background-color: purple; width: 200px; height: 200px; } #box-purple #box-pink { background-color: pink; height: 50%; width: 50%; display: inline-block; position: relative; top: 0px; right: 0px; } 
 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>Boxes</title> </head> <body> <div id="box-grey"> <div id="box-orange"</div> </div> <div id="box-black"> <div id="box-yellow"</div> </div> <div id="box-blue"> <div id="box-green"</div> </div> <div id="box-purple"> <div id="box-pink"</div> </div> </body> </html>

11 个解决方案

解决方案1
 3 已采纳  2018-05-04 11:58:16

这是没有现代css3 grid和flex功能的常规解决方案。 我们可以设置display: inline-block和position: relative对于包装盒，然后设置position: absolute用于内盒并将其定位到角落。 

 body { min-width: 840px; } .box { display: inline-block; width: 200px; height: 200px; position: relative; } .box-inner { height: 50%; width: 50%; position: absolute; } #box-grey { background-color: grey; } #box-grey #box-orange { background-color: orange; right: 0; top: 0; } #box-black { background-color: black; } #box-black #box-yellow { background-color: yellow; bottom: 0; right: 0; } #box-blue { background-color: blue; } #box-blue #box-green { background-color: green; bottom: 0; left: 0; } #box-purple { background-color: purple; } #box-purple #box-pink { background-color: pink; top: 0; left: 0; } 
 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>Boxes</title> </head> <body> <div id="box-grey" class="box"> <div id="box-orange" class="box-inner"></div> </div> <div id="box-black" class="box"> <div id="box-yellow" class="box-inner"></div> </div> <div id="box-blue" class="box"> <div id="box-green" class="box-inner"></div> </div> <div id="box-purple" class="box"> <div id="box-pink" class="box-inner"></div> </div> </body> </html>

解决方案2
 2  2018-05-04 12:09:33

 #container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 1em; } #box-1, #box-2, #box-3, #box-4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 200px; width: 200px; } #box-1 { background-color: grey; } #box-2 { background-color: black; } #box-3 { background-color: blue; } #box-4 { background-color: purple; } #box-grey { background-color: grey; } #box-orange { background-color: orange; } #box-black { background-color: black; } #box-blue { background-color: blue; } #box-purple { background-color: purple; } #box-yellow { background-color: yellow; } #box-green { background-color: green; } #box-pink { background-color: pink; } 
 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>Boxes</title> </head> <body> <div id="container"> <div id="box-1"> <div></div> <div id="box-orange"> </div> </div> <div id="box-2"> <div></div> <div></div> <div></div> <div id="box-yellow"></div> </div> <div id="box-3"> <div></div> <div></div> <div id="box-green"></div> </div> <div id="box-4"> <div id="box-pink"></div> </div> </div> </body> </html>

使用CSS网格方法！ 更容易理解！

解决方案3
 1  2018-05-04 11:53:15

您的代码有问题。 您有很多未关闭的<div> 。 试试这个代码。 

 body {} .box-wrap { display: flex; } #box-grey { background-color: grey; height: 200px; width: 200px; position: relative; } #box-grey #box-orange { background-color: orange; height: 50%; width: 50%; display: inline-block; position: absolute; top: 0; right: 0; } #box-black { background-color: black; height: 200px; width: 200px; position: relative; } #box-black #box-yellow { background-color: yellow; height: 50%; width: 50%; display: inline-block; position: absolute; bottom: 0; right: 0; } #box-blue { background-color: blue; height: 200px; width: 200px; position: relative; } #box-blue #box-green { background-color: green; height: 50%; width: 50%; display: inline-block; position: absolute; bottom: 0; left: 0px; } #box-purple { background-color: purple; width: 200px; height: 200px; position: relative; } #box-purple #box-pink { background-color: pink; height: 50%; width: 50%; display: inline-block; position: absolute; ; top: 0px; left: 0px; } 
 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>Boxes</title> </head> <body> <div class="box-wrap"> <div id="box-grey"> <div id="box-orange"></div> </div> <div id="box-black"> <div id="box-yellow"></div> </div> <div id="box-blue"> <div id="box-green"></div> </div> <div id="box-purple"> <div id="box-pink"></div> </div> </div> </body> </html>

解决方案4
 1  2018-05-04 11:57:52

要使框水平对齐，一个非常简单的解决方案是在所有框上设置一个float:left 。 如果屏幕的宽度不足以将它们全部水平显示，那么那些不合适的屏幕将自动推到下一行。

为了在您的代码中实现此目的，我在所有外部div上放置了一个名为“ outer-box”的类，然后在CSS中设置一个规则，该类中的所有元素都将向左浮动。 这使它们不再是块级元素（即，总是导致新行开始的块级元素）。

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/float，以获取有关浮动的更详细的文档。 

 body {} .outer-box { float: left; } #box-grey { background-color: grey; height: 200px; width: 200px; } #box-grey #box-orange { background-color: orange; height: 50%; width: 50%; display: inline-block; position: relative; fixed: 100px; left: 100px; } #box-black { background-color: black; height: 200px; width: 200px; } #box-black #box-yellow { background-color: yellow; height: 50%; width: 50%; display: inline-block; position: relative; top: 100px; left: 100px; } #box-blue { background-color: blue; height: 200px; width: 200px; } #box-blue #box-green { background-color: green; height: 50%; width: 50%; display: inline-block; position: relative; top: 100px; right: 0px; } #box-purple { background-color: purple; width: 200px; height: 200px; } #box-purple #box-pink { background-color: pink; height: 50%; width: 50%; display: inline-block; position: relative; top: 0px; right: 0px; } 
 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>Boxes</title> </head> <body> <div id="box-grey" class="outer-box"> <div id="box-orange"></div> </div> <div id="box-black" class="outer-box"> <div id="box-yellow"></div> </div> <div id="box-blue" class="outer-box"> <div id="box-green"></div> </div> <div id="box-purple" class="outer-box"> <div id="box-pink"></div> </div> </body> </html>

解决方案5
 0  2018-05-04 11:59:20

试试这个CSS 

 #box-grey { background-color: grey; height: 200px; width: 200px; float:left; margin:10px; } #box-grey #box-orange { background-color: orange; height: 50%; width: 50%; display: inline-block; position: relative; float:left; left: 100px; } #box-black { background-color: black; height: 200px; width: 200px; float:left; margin:10px; } #box-black #box-yellow { background-color: yellow; height: 50%; width: 50%; display: inline-block; position: relative; top: 100px; left: 100px; float:left; } #box-blue { background-color: blue; height: 200px; width: 200px; float:left; margin:10px; } #box-blue #box-green { background-color: green; height: 50%; width: 50%; display: inline-block; position: relative; top: 100px; right: 0px; float:left; } #box-purple { background-color: purple; width: 200px; height: 200px; float:left; margin:10px; } #box-purple #box-pink { background-color: pink; height: 50%; width: 50%; display: inline-block; position: relative; top: 0px; right: 0px; float:left; } 
 <div id="box-grey"> <div id="box-orange"></div> </div> <div id="box-black"> <div id="box-yellow"></div> </div> <div id="box-blue"> <div id="box-green"></div> </div> <div id="box-purple"> <div id="box-pink"></div> </div>

解决方案6
 0  2018-05-04 12:02:02

我已将类添加到div中以更好地管理代码。 

 body {} .outerbox { display: inline-block; height: 100px; width: 24%; position: relative; } .innerbox { height: 50px; width: 50px; position: absolute; } #box-grey { background-color: grey; } #box-grey #box-orange { background-color: orange; right: 0; top: 0; } #box-black { background-color: black; } #box-black #box-yellow { background-color: yellow; right: 0; bottom: 0; } #box-blue { background-color: blue; } #box-blue #box-green { background-color: green; left: 0; bottom: 0; } #box-purple { background-color: purple; } #box-purple #box-pink { background-color: pink; top: 0; left: 0; } 
 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <title>Boxes</title> </head> <body> <div id="box-grey" class="outerbox"> <div id="box-orange" class="innerbox"></div> </div> <div id="box-black" class="outerbox"> <div id="box-yellow" class="innerbox"></div> </div> <div id="box-blue" class="outerbox"> <div id="box-green" class="innerbox"></div> </div> <div id="box-purple" class="outerbox"> <div id="box-pink" class="innerbox"></div> </div> </body> </html>

解决方案7
 0  2018-05-04 12:02:51

您缺少div结束标记。

还可以在CSS中放一个display: flex 。

请参阅工作示例： https : //codepen.io/anon/pen/wjqmOK

解决方案8
 0  2018-05-04 12:04:04

使用flexbox的示例 

  .parent { display: flex; justify-content: center; } .child { height: 100px; width: 100px; } .child:nth-child(1) { background-color: pink; } .child:nth-child(2) { background-color: green; } .child:nth-child(3) { background-color: blue; } 
  <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

解决方案9
 0  2018-05-04 12:04:10

水平框可以通过多种方式完成。

  1. 您可以在框类上使用float：left或在display：inline-block 

     .box { float: left; // comment out this or display: inline-block display: inline-block; // comment out this or float: left height: 200px; width: 200px; position: relative; } .box.grey { background-color: #808080; } .box.black{ background-color: #000000; } .box.blue{ background-color: #0000FF; } .box.purple{ background-color: #810081; } .inner-box{ position: absolute; } .inner-box.orange{ top: 0; right: 0; background-color: #FFA600; } .inner-box.yellow{ bottom: 0; right: 0; background-color: #FFFF00; } .inner-box.green{ bottom: 0; left: 0; background-color: #008100; } .inner-box.pink{ top: 0; left: 0; background-color: #FFC0CB; }

  2. 您可以将box div包装在另一个包装中，并利用flexbox

    .boxes {display：flex; flex-direction：行； }

的HTML 

<!doctype html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <title>Boxes</title>
    </head>
    <body>
        <div class="box grey">
          <div class="inner-box orange"></div>
        </div>
        <div class="box grey">
          <div class="inner-box yellow"></div>
        </div>
        <div class="box blue">
          <div class="inner-box green"></div>
        </div>
        <div class="box purple">
          <div class="inner-box pink"></div>
        </div>
    </body>
    </html>

我还建议使用类而不是id，除非您打算在某个时候计划和影响js的dom

解决方案10
 -1  2018-05-04 11:51:59

在{body}或{*}上尝试一下以申请所有div元素：- 

body
{
margin: auto;
vertical-align: center;
text-align: center;
}

//if you apply on this div only
#box-blue 
{
background-color: blue;
height: 200px;
width: 200px;
margin: auto;
vertical-align: center;
text-align: center;
}

您可以应用此代码并告诉我结果，它适合您吗？

解决方案11
 -1  2018-05-04 12:16:08

有了Aryans的额外“班级”，我终于可以得到想要的结果！ 添加了页边距：右5像素； 得到正确的盒子之间的间距。 问题已解决-谢谢！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何水平对齐跨距或div？ 如何将这些div在中心水平对齐？ CSS-如何水平对齐div？ 如何在CSS中水平对齐我的Thumb Nail图像？ 如何水平对齐我的盒子？ 如何水平对齐div？ 如何将这些div在中心水平对齐？ 如何水平对齐这些 div？ 如何在这些框中水平对齐这些div？ CSS - 使 div 水平对齐
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM