Tag:css
Article From:https://segmentfault.com/q/1010000012152896
Question:

This is an example of realizing 200px on the left and adaptive on the right.

css:
.left {
        float: left;
        width: 200px;
        height: 100px;
        background: #0FF;
    }
.right {
        margin-left: 200px;
        height: 100px;
        background: #CF0;
    }
html:
<div class="parent">
   <div class="left"></div>
   <div class="right"></div>
</div>

The display is very normal,

Then I imitate the right side of the writing, and the left is adaptive.

    .left1 {
        margin-right: 200px;
        height: 100px;
        background: #CF0;
    }

    .right1 {
        float: right;
        width: 200px;
        height: 100px;
        background: #0FF;
    }

And then it’s shown.

I want to know why,
All kinds of browsers have tried it
And then I try to add.Left to float:left
The width of the left side becomes 0 directly. Why is this?
The front end just went into the pit. It was very confused.

Answer 0:

For a kind of I always use, no matter how many on the left, the last one.self-adaption
All on the leftfloat:left;
LastOneoverflow:hidden;
Of course, don’t forgetFather levelalsooverflow:hidden;

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>No title document < /title>< /head>< body>< style>Div{height:100px;}.box{overflow:hidden; width:400px; height:100px; border:#000 solid 1px; margin:20px Auto;}.t1{width:100px; float:left; background:#dd4215;}.t2{width:150px; float:left; background:#000;}.t3{overflow:hidden; background:#0F6;}< /style>< div class= "box" >< div class= "T1" > < /div>< div class= "T2" > < /div>< divClass= "T3" > < /div>< /div>< /body>< /html>

Answer 1:

You can change the location of the two div elements in your HTML.

Answer 2:

The same little white. Div is a block level element, that is, his display is block. Block – level elements occupy one line. You can imagine that after each div, a line break is hidden by default. This causes the next element to be displayed in a line. The float will remove the hidden line.
The left box in the example one adds the float attribute, and the right box thinks that the left box does not exist, squeezed upwards, and then the margin-left is set, so the right box goes to the right, and the result is the final display of the two boxes and the full line.
The left box of example two does not set the float attribute, which is a block level element with its own line wrap. So your right box will not be displayed along with the left box.
After adding float, the display width is 0 because you do not design width for the box.

To achieve self-adaptive, you can try the flex layout.

html:

<div class="parent">
  <div class="left">1</div>
 <div class="right">2</div>
</div>

css:

.parent1{
    display: flex;
}
.left {
    width: 200px;
    height: 100px;
    background: red;
  }
.right {
    flex: 1;
    height: 100px;              
    background: blue;
 }

If you want which box to be self adaptable, just add flex:1 to the box’s style and cancel the flex of the other box.

Answer 3:

Upstairs is right, you understand, recommend an article later.
http://www.zhangxinxu.com/wor…

Answer 4:

Upstairs, upstairs is right. About BFC, you can see this, https://www.w3.org/TR/CSS2/vi…

Answer 5:

Show the effect on the same line, if not all of the floating elements, floating elements to write first, otherwise the floating elements will be occupied and then floating, showing the effect is not in the same line.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *