Combination of width, min-width and max-width
Question
I want to achieve the following: A design with two columns of the same width, covering the whole width of the document, or a fixed width of pixels, whichever is smaller. When they are resized to a certain width, they should be moved underneath each other and take up at most 100% of the width of the screen (exactly 100% would be nice, but is not necessary).
I came up with the following code, but the max-width of 100% does not get applied.
Can i combine a width in percent and a max-width in percent like this?
Is this possible without another layer of divs?
Is this possible at all?
#head { background-color: #00FF00; } body { text-align: center; } #container { margin: 0 auto; width: 100%; max-width: 500px; text-align: center; } #left { background-color: #FF0000; float: left; width: 50%; min-width: 150px; max-width: 100%; } #right { background-color: #0000FF; float: left; width: 50%; min-width: 150px; max-width: 100%; }
<div id="head"> foo </div> <div id="container"> <div id="left"> bar </div> <div id="right"> baz </div> </div>
2 answers
solution1
0 2016-03-23 20:45:30
you may use flex and min-width: http://codepen.io/anon/pen/JXNMgd
/* added */ #container { display: flex; flex-wrap: wrap; } #left, #right { flex: 1; } /* your css cleared a bit */ #head { background-color: #00FF00; } body { text-align: center; } #container { margin: 0 auto; max-width: 500px; text-align: center; } #left, #right { background-color: #FF0000; min-width: 150px; } #right { background-color: #0000FF; }
<div id="head"> foo </div> <div id="container"> <div id="left"> bar </div> <div id="right"> baz </div> </div>
solution2
0 ACCPTED 2016-03-23 20:46:08
I think you need media queries. You can set the width for different viewports.
#head { background-color:#00FF00; } body { text-align:center; } #container{ margin: 0 auto; width:100%; max-width:500px; text-align:center; } #left { background-color:#FF0000; float: left; width: 50%; min-width: 150px; max-width: 100%; } #right { background-color:#0000FF; float: left; width: 50%; min-width: 150px; max-width: 100%; } @media (max-width: 500px) { #left { width: 100%;} #right { width: 100%;} }
<html> <head> </head> <body> <div id="head"> foo </div> <div id="container"> <div id="left"> bar </div> <div id="right"> baz </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.