Wie werden beide Divs immer noch in der gleichen Zeile angezeigt, während der erste eine feste Breite hat und der andere mit der Seite entsprechend schrumpft?

Question

it is container 
main { 
    max-width: 1000px; 
} 

main div { 
    padding: 30px; 
    box-sizing: border-box; 
} 

Erste div mit fester Breite, ich will es die gleiche Breite alle Zeiten bleiben.

main .first { 
    background: red; 
    width: 300px; 
    float: left; 

} 



main .second { 
    background: green; 
    width: 70%; 
    float: left; 

} 

Ich mag dies entsprechend schrumpfen, wenn die Seite ändert die Größe und immer noch mit dem „ersten div“

Answer 1

Da Schnipsel-Display hat kleine Fläche in der gleichen Linie sein, so i Breite von main.first zu 100px gedreht weil 70% + 300px nicht für kleine Bildschirme funktionieren. Sie haben entweder Prozentsatz oder Pixel für kleine Bildschirme können

main { 
 
    max-width: 1000px; 
 
} 
 

 
main div { 
 
    padding: 30px; 
 
    box-sizing: border-box; 
 
} 
 
main .first { 
 
    background: red; 
 
    width: 100px; 
 
    float: left; 
 
display:inline-block; 
 
} 
 

 

 

 
main .second { 
 
    background: green; 
 
    width: 70%; 
 
    float: left; 
 
display:inline-block; 
 
}

<main> 
 
<div class="first"></div> 
 
    <div class="second"></div> 
 
</main>

Answer 2

Sie zuverlässig diese Weise eine von zwei tun zu reduzieren, von denen beide CSS Level erfordern 3:

Flexboxes

main { 
 
    display: flex; 
 
    max-width: 1000px; 
 
} 
 

 
main div { 
 
    padding: 30px; 
 
    box-sizing: border-box; 
 
} 
 

 
main .first { 
 
    background-color: red; 
 
    width: 300px; 
 
} 
 

 
main .second { 
 
    background-color: green; 
 
    flex: 1; 
 
}

<main> 
 
    <div class="first"></div> 
 
    <div class="second"></div> 
 
</main>

calc()

main { 
 
    display: flex; 
 
    max-width: 1000px; 
 
} 
 

 
main div { 
 
    box-sizing: border-box; 
 
    display: inline-block; /* you can alternatively use float:left here */ 
 
    padding: 30px; 
 
} 
 

 
main .first { 
 
    background-color: red; 
 
    width: 300px; 
 
} 
 

 
main .second { 
 
    background-color: green; 
 
    width: calc(100% - 300px); 
 
}

<main> 
 
    <div class="first"></div> 
 
    <div class="second"></div> 
 
</main>

Answer 3

Schnell Antwort Verwendung CSS3 calc(),

Wenn ein div ein width befestigt ist, kann der calc() diesen Wert subtrahieren beide zu halten div s inline die ganze Zeit (zusammen mit der float).

main { 
 
    max-width: 1000px 
 
} 
 
main div { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    padding: 30px 
 
} 
 
main .first { 
 
    background: lightblue; 
 
    width: 300px 
 
} 
 
main .second { 
 
    background: lightgreen; 
 
    width: calc(100% - 300px) 
 
}

<main> 
 
    <div class="first"></div> 
 
    <div class="second"></div> 
 
</main>