最小化时头部重叠(header overlapping when minimized)
当我最小化窗口时，div容器重叠。 有没有办法避免这种情况？ 我尝试将最小宽度最小化到合理的数量，但问题仍然存在
背景图片：
Html5：
<body> <header class="header"> <img src="images/logo.png"> <div class="coloredBG"></div> <div class="coloredBG"></div> <div class="coloredBG"></div> <div class="coloredBG"></div> </header> </body>CSS
.header { max-width:1200px; min-width:200px; margin: 0 auto; margin-top:30px; } .coloredBG { background: #406d85; height:100px; width:170px; float:right; margin-left:3px; -webkit-transition: background 1s; -o-transition: background 1s; -moz-transition: background 1s; }演示
When I minimize the window, the div containers are overlapping. Is there a way to avoid this? I tried minimizing the min-width to a reasonable amount but the problem still persist
Image of context:
Html5 :
<body> <header class="header"> <img src="images/logo.png"> <div class="coloredBG"></div> <div class="coloredBG"></div> <div class="coloredBG"></div> <div class="coloredBG"></div> </header> </body>CSS
.header { max-width:1200px; min-width:200px; margin: 0 auto; margin-top:30px; } .coloredBG { background: #406d85; height:100px; width:170px; float:right; margin-left:3px; -webkit-transition: background 1s; -o-transition: background 1s; -moz-transition: background 1s; }demo
最满意答案
也许这就是你需要的
小提琴
为您的页面提供最小宽度。
将溢出设置为auto
向左浮动img
将div包装在占据剩余宽度的容器中
通过给出div显示中心容器：inline-block
标记
<header class="header"> <img src="http://placehold.it/380x150"> <div class="container"> <div class="coloredBG"> </div> <div class="coloredBG"> </div> <div class="coloredBG"> </div> <div class="coloredBG"> </div> </div> </header>CSS
body { min-width: 775px; overflow:auto; } header img { border-right:solid #406d85 1px; padding-right:20px; float:left; } .container { text-align: center; overlow:auto; } .header { max-width:1200px; min-width:200px; margin-top:30px; } .coloredBG { background: #406d85; height:100px; width:170px; display:inline-block; margin-left:3px; -webkit-transition: background 1s; -o-transition: background 1s; -moz-transition: background 1s; } .coloredBG:hover { background: #103b51; -webkit-transition: background 2s; -o-transition: background 2s; -moz-transition: background 2s; }Maybe this is what you need
FIDDLE
Give your page a minimum width.
Set overflow to auto
Float img to left
Wrap the divs in a container which takes up the remaining width
Center container by giving divs display:inline-block
Markup
<header class="header"> <img src="http://placehold.it/380x150"> <div class="container"> <div class="coloredBG"> </div> <div class="coloredBG"> </div> <div class="coloredBG"> </div> <div class="coloredBG"> </div> </div> </header>CSS
body { min-width: 775px; overflow:auto; } header img { border-right:solid #406d85 1px; padding-right:20px; float:left; } .container { text-align: center; overlow:auto; } .header { max-width:1200px; min-width:200px; margin-top:30px; } .coloredBG { background: #406d85; height:100px; width:170px; display:inline-block; margin-left:3px; -webkit-transition: background 1s; -o-transition: background 1s; -moz-transition: background 1s; } .coloredBG:hover { background: #103b51; -webkit-transition: background 2s; -o-transition: background 2s; -moz-transition: background 2s; }更多推荐
发布评论