Html 我怎么能在一个div中有4个大小相等且没有连接在一起的div？_Html_Css

Html 我怎么能在一个div中有4个大小相等且没有连接在一起的div？

html css

Html 我怎么能在一个div中有4个大小相等且没有连接在一起的div？,html,css,Html,Css,下面是我描述的一个例子：如果希望div并排，则可以使用float属性。如果你想在div之间分开，那么你可以使用margin属性。实现你想要的东西的简单方法：使用float:left为你工作 <div style="width:100%"> <div style="width:100%"> <div style="width:45%; float:left"> div1 </div> <div style

下面是我描述的一个例子：

如果希望div并排，则可以使用float属性。如果你想在div之间分开，那么你可以使用margin属性。

实现你想要的东西的简单方法：使用float:left为你工作

<div style="width:100%">
 <div style="width:100%">
   <div style="width:45%; float:left">  
      div1
   </div>
   <div style="width:45%; ">  
      div2
   </div>
 </div>
 <div style="width:100%">
   <div style="width:45%; float:left">  
      div3
   </div>
   <div style="width:45%; ">  
      div4
   </div>
 </div>      
</div>

如前所述，使用浮动和保证金解决您的问题。要使两个浮点数相邻，请使用“宽度”

CSS:

HTML:

我用45%的宽度作为浮标，以确保它们合适。由于利润，50%不起作用。我想45%可能会稍微增加一些，但这取决于内部div的边距。

试试这段代码

<html>
<head>
<style type="text/css">
#main   {
    width:130px;
    padding:10px 0px 0px 0px;
    height:auto;
    overflow:hidden;
    background-color:#171817;
}

.div1   {
    width:50px;
    height:50px;
    float:left;
    display:inline;
    margin:0px 0px 10px 10px;
    background-color:white; 
}
</style>
</head>
<body>
<div id="main">
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
</div>
</body>
</html>

这可能是您的HTML：

<div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
</div>

结果是：

如果要保存某些字符，则内部div不需要类。如果您只想选择第一个子字符串，则可以使用如下css选择器：.outer div或.outer>div，但使用更复杂的css选择器（如子选择器和后代选择器）似乎会降低浏览器的速度。因此，在这种情况下很容易避免。如果值为0，则不需要指定单位。0总是0：填充单位更清晰，这是一件好事。0并不总是0，例如0摄氏度与0华氏度或Kelvin@vergel当前位置我认为这是一个糟糕的论点。你永远不会在CSS样式表中使用farenheit。使用尺寸时，0始终为0。我总是避免用任何代码编写无用的东西。只有澄清了一些事情，这才有意义。但正如你所知，0px==0pt==0%。使用它们会使你的CSS更重，写的时间更长，而且会伤害我的眼睛

<html>
<head>
<style type="text/css">
#main   {
    width:130px;
    padding:10px 0px 0px 0px;
    height:auto;
    overflow:hidden;
    background-color:#171817;
}

.div1   {
    width:50px;
    height:50px;
    float:left;
    display:inline;
    margin:0px 0px 10px 10px;
    background-color:white; 
}
</style>
</head>
<body>
<div id="main">
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
</div>
</body>
</html>

<div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
</div>

div {
    float: left; /* so the surrounding div takes only the size of its content */
    padding: 20px 0 0 20px; /* to get the same spacing everywhere */
    overflow: hidden; /* this is not needed but i like to use it because clients never do what they shoul :P */
    border: 4px solid black;
}

div > div {
    float: left; /* places the divs next to each other */
    width: 50px;
    height: 50px;
    margin: 0 20px 20px 0; /* makes the space between the divs */
    border: 4px solid black;
}

div > div:nth-child(3n) {
    clear: both; /* you want the 3rd div to start a new line */
}