发表新帖
发表新帖

How to get these two divs side-by-side?

前端 未结
关注
8 896
無奈伤痛
無奈伤痛 2020-11-27 14:28

I have two divs that are not nested, one below the other. They are both within one parent div, and this parent div repeats itself. So essentially:



        

                      

              相关标签:
8条回答
  • 攒了一身酷
    2020-11-27 15:11

    Using flexbox

       #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }
    0 讨论(0)
  • 长情又很酷
    2020-11-27 15:14 
    #parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

    Check working example at http://jsfiddle.net/c6242/1/

    0 讨论(0)
  • 小鲜肉
    2020-11-27 15:14

    I found the below code very useful, it might help anyone who comes searching here

    <html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

    0 讨论(0)
  • 余生分开走
    2020-11-27 15:18

    Best that works for me:

     .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }


    http://jsfiddle.net/jiantongc/7uVNN/

    0 讨论(0)
  • 北海茫月
    2020-11-27 15:21

    Using flexbox it is super simple!

    #parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

    Fiddle example

    0 讨论(0)
  • 广开言路
    2020-11-27 15:24

    Since div's by default are block elements - meaning they will occupy full available width, try using -

    display:inline-block;

    The div is now rendered inline i.e. does not disrupt flow of elements, but will still be treated as a block element.

    I find this technique easier than wrestling with floats.

    See this tutorial for more - http://learnlayout.com/inline-block.html. I would recommend even the previous articles that lead up to that one. (No, I did not write it)

    0 讨论(0)
 看不清?
提交回复
热议问题