Question

我想将4个div元素并排放在一个主div元素中。我试过float：left，但div元素不在主div元素内;相反，它们位于浏览器页面的左侧。有没有办法使用float：left为主要元素而不是整个浏览器页面？或者使用完全不同的方法在主div元素内并排显示它们。

CSS代码：

#div1, #div2, #div3, #div4 {   
width: 125px;
height: 125px;
margin: 10px;
padding: 1px;
border: 1px solid black;
}
.maindiv {
background-color: #e5e4d7;
margin:10px;
border-radius:5px;
padding:20px;
}

HTML code：

<div class="main1">
<div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
<div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
<div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
<div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"></div>
</div>

拖放是针对javascript的，我仍然想弄清楚，所以忽略那部分，因为我现在只做css。到目前为止，这是有效的，但四个div元素堆叠在一起而不是并排。任何帮助将不胜感激。谢谢。

Answer 1

您只需提供容器div float: left;

JSFiddle

Answer 2

当你在其中浮动元素时，

将overflow:hidden;放到容器中。

#div1, #div2, #div3, #div4 {   
    width: 125px;
    height: 125px;
    margin: 10px;
    padding: 1px;
    border: 1px solid black;
    float: left;
}
.main1{
    background-color: #e5e4d7;
    margin:10px;
    border-radius:5px;
    padding:20px;
    overflow: hidden;
}

<div class="main1">
    <div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
    <div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
    <div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
    <div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"></div>
</div>

Answer 3

您还可以使用display: inline-block;来帮助居中对齐。

＆＃13;

#div1, #div2, #div3, #div4 {   
    width: 125px;
    height: 125px;
    margin: 10px;
    padding: 1px;
    border: 1px solid black;
    display: inline-block;
}
.main1 {
    background-color: #e5e4d7;
    margin:10px;
    border-radius:5px;
    padding:20px;
    text-align: center;
}

＆＃13;

<div class="main1">
    <div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
    <div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
    <div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
    <div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"></div>
</div>

＆＃13;

Answer 4

你可以使用display：flex来实现相同的

.main1{
      display:flex;
      border:1px solid black;
}
.main1 div{
      border:1px solid black;
      height:50px;
      width:50px;
      margin:10px;
}

<div class="main1">
    <div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
    <div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
    <div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
    <div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"></div>
</div>

如果你想在每一行只有四个div元素，你可以使用flex-wrap

.main1{
     display:flex;
     flex-wrap:wrap;
     border:1px solid black;
}

.main1 div{
      flex-basis:20%;
      height:10vw;
      border:1px solid black;
      margin:10px;
      background:green;
}

<div class="main1">
    <div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
    <div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
    <div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
    <div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"></div>      
    <div id="div5" ondrop="drop(event, 'div5')" ondragover="allowDrop(event, 'div5')"></div>
    <div id="div6" ondrop="drop(event, 'div6')" ondragover="allowDrop(event, 'div6')"></div>
    <div id="div7" ondrop="drop(event, 'div7')" ondragover="allowDrop(event, 'div7')"></div>
    <div id="div8" ondrop="drop(event, 'div8')" ondragover="allowDrop(event, 'div8')"></div>
</div>

4个div元素并排在一个主div元素

4 个答案: