0

当我最小化窗口时，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;

}

演示

4

2 回答 2

0

嗨，这个好点了吗？我认为它可以解决您的问题？

我将你的盒子包裹在另一个 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/

于 2013-07-18T15:25:52.390 回答
0

也许这就是你需要的

小提琴

  • 给你的页面一个最小宽度。

  • 将溢出设置为自动

  • 向左浮动 img

  • 将 div 包裹在一个占据剩余宽度的容器中

  • 通过给 div display: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;
}
于 2013-07-18T16:49:00.993 回答