Question

当我最小化窗口时，div容器重叠。有办法避免这种情况吗？我尝试将最小宽度最小化到合理的数量，但问题仍然存在

背景图片： enter image description here

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

Answer 1

嗨这是更好吗？我认为这可以解决你的问题吗？

我将你的盒子包裹在另一个div中并给了它一个宽度。

    <header class="header">
    <img src="images/logo.png" />

    <div class="backgrounds">
            <div class="coloredBG"> 
            </div>
            <div class="coloredBG">
            </div>
            <div class="coloredBG">
            </div>
            <div class="coloredBG">
            </div>
    </div>
</header>

CSS：

.backgrounds{
position:relative;
width:700px;
float:right;

}

http://jsfiddle.net/farhanafzal/RvV6K/

Answer 2

也许这就是你需要的

<强> FIDDLE

为您的网页提供最小宽度。
将溢出设置为自动
将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;
}

最小化时头部重叠

2 个答案:

标记

CSS