Question

美好的一天！我有一个简单网站的问题，我确信这是一个我无法解决的简单问题。

这是我的HTML代码。

的index.html

  <body>
<header> my gallery </header>
<div class="container">
<div class="box">
<img src="#" alt="img"/>
 </div>
 <div class="box">
<img src="#" alt="img"/>
 </div>
 <div class="box">
<img src="#" alt="img"/>
 </div>
 <div class="box">
<img src="#" alt="img"/>
 </div>
 <div class="box">
<img src="#" alt="img"/>
 </div>
 <div class="box">
<img src="#" alt="img"/>
 </div>
 <div class="box">
<img src="#" alt="img"/>
 </div>
 <div class="box">
<img src="#" alt="img"/>
 </div>
</div>
</body>

的style.css

 body {
 margin: 20px;
 }
header {
text-align: center;
}

.container {
padding: 20px;
background: pink;
}
.box {
width: 200px;
height: 200px;
float: left;
}

我想要做的是我想修复容器的宽度以适应屏幕显示器屏幕尺寸的宽度。身体的边距为20px，容器的填充量为20px。如果浏览器是完整的大小，它将工作，但如果我将重新调整浏览器的大小，容器的大小也是如此。我想修复容器宽度，以便类框不会重新对齐。

Answer 1

如果要修复容器，则必须设置固定宽度，如下所示：

HTML：

<body>
<header> my gallery </header>
<div class="container">
<div class="box">
    <img src="#" alt="img"/>
</div>
<div class="box">
    <img src="#" alt="img"/>
</div>
<div class="box">
    <img src="#" alt="img"/>
</div>
<div class="box">
    <img src="#" alt="img"/>
</div>
<div class="box">
    <img src="#" alt="img"/>
</div>
<div class="box">
    <img src="#" alt="img"/>
</div>
<div class="box">
    <img src="#" alt="img"/>
</div>
<div class="box">
    <img src="#" alt="img"/>
</div>
</div>
</body>

的CSS：

 body {
    margin: 20px;
}
header {
    text-align: center;
}

.container {
    padding: 20px;
    background: pink;
    width:1020px;
    overflow:hidden
}
.box {
    width: 200px;
    height: 200px;
    border:1px solid red;
    float: left;
}

Answer 2

解决您的问题：

1. Use percent values for width, and
2. Group horizontal rows in DIVs, also using widths set in percents

就像现在一样，当你调整屏幕大小时，每个.box DIV都会掉到下面一行。

如果您创建水平行的DIV并将.box DIV放在.row DIV内，那么当屏幕重新调整大小时，每个DIV（以及图片中的图片）的宽度将会也变小了。每行将在该行上保持相同数量的图像。

jsFiddle DEMO

实施例

<强> HTML：

<header> my gallery </header>
<div class="container">
    <div class="row">
        <div class="box"><img src="http://placeimg.com/100/100/animals" alt="img"/></div>
        <div class="box"><img src="http://placeimg.com/100/100/animals" alt="img"/></div>
    </div><!-- .row -->
    <div class="row">
        <div class="box"><img src="http://placeimg.com/100/100/animals" alt="img"/></div>
        <div class="box"><img src="http://placeimg.com/100/100/animals" alt="img"/></div>
    </div><!-- .row -->
</div><!-- .container -->

<强> CSS：

body {margin:20px;}
header {text-align:center;}
.container {background:pink;}
.box {float:left;width:32%;height:auto;}

.row {width:100%;margin-left:20px;overflow:hidden;}

另请注意，在您的示例中，粉红色背景不会延伸到图库的底部。

这是因为.float css指令。这是对正在发生的事情的解释。

Can't set DIV equal to another DIV HTML/Javascript

<强> 更新

更新了jsFiddle Demo以在CSS中添加此行：

.box img{width:100%;height:auto;}

将图像的宽度设置为其所在的.box的100％。高度会自动调整，因此图像会保持其宽高比。

正文和容器修复html和css

2 个答案: