div 没有扩展 100%，也请反馈答案

【问题标题】：divs not expanding 100%, also feedback pleasediv 没有扩展 100%，也请反馈
【发布时间】：2013-11-23 07:52:58
【问题描述】：

HTML/CSS 新手（1-2 个月）。

当我让浏览器变小时，圆圈会继续通过，但父 div 不会跟随到 100% 的宽度。

如图所示： http://i1239.photobucket.com/albums/ff515/Cyrixau/eg_zps35c7b645.png

我该如何解决这个问题？

HTML 和 CSS 可以在此处的站点中看到： http://fsd.netii.net/

另外，我有兴趣成为一名前端开发人员，我构建我的 html/css 的方式，我定位一切的方式。这是最佳实践吗？我可以就我可以改进的地方获得反馈吗？

谢谢。

【问题讨论】：

把相关代码贴在这里，不是一些外部网站。

标签： css html feedback

【解决方案1】：

原因是您在 CSS 中为 .header-circles 和 .a-circle 类指定了固定宽度。

当浏览器宽度变小时，尝试使用媒体查询和调整类的大小。

@media (max-width: 1140px) {
  .header-circles {
    width:100%;
  }
  .a-circle{
    width:130px;
    height:130px;
  }
}

@media (max-width: 900px) {
  .a-circle{
    width:100px;
    height:100px;
  }
}

我还没有测试过，但这就是想法

【讨论】：

【解决方案2】：

发生这种情况的原因是因为您绝对定位了圆形元素：

#cirle1 { 
    position: absolute; top: 0px; left: 0px; 
}
#cirle2 { 
    position: absolute; top: 0px; left: 285px; 
}
#cirle3 { 
    position: absolute; top: 0px; left: 570px; 
}

...

您可以做两件事来达到您想要达到的效果，无论哪种方式，您都需要删除圆形容器上的绝对定位并将父 div 的最大宽度设置为 100%。

#circles-content, .header-circles { 
  width: 100%; max-width: 100%; 
}

然后你可以

浮动圆形容器：

.circle-container: { 
    float: left; margin-left: 5%;
}

将它们的显示属性设置为 inline-block:

.circle-container: { 
    display:inline-block; 
}

【讨论】：

【解决方案3】：

您似乎正在制作一个响应式网站，并且在您的 CSS 中使用了很多固定宽度。你应该有百分比而不是像素。

您不需要元素的绝对定位，您可以将元素样式放在类上而不是每个元素上。

您应该使用媒体查询来进行响应式设计。

【讨论】：

【解决方案4】：

据我了解您的问题，您是在询问如何在浏览器的宽度发生变化时使您的 HTML 元素“响应”。如果是这种情况，有两种方法可以做到这一点。

首先，流畅的布局：您需要使用百分比作为度量单位来布局您的元素。由于您使用的是像素，请尝试将其更改为百分比 - 如下所示：

/* SLIDER */
#slider-container {
    background-color: #E6E6E6;
    margin-bottom: 0px;
    width: 100%;
    height: 400px;  
}

/* BODY */
#circles-content {
    background-color: #F0F0F0;
    width: 100%;
    height: 285px;
}

.header-circles { 
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 300px;
}

.circle-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20%;
    height: 285px;
}

.a-circle {
    position: absolute;
    top: 35px;
    left: 55px;
    padding-left: 50px;
    width: 175px;
    height: 175px;
    border: 2px solid #3498db;
    border-radius: 50%;
    box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

#circle-2 {
    position: absolute;
    top: 0px;
    left: 20%;
}

#circle-3 {
    position: absolute;
    top: 0px;
    left: 40%;
}

#circle-4 {
    position: absolute;
    top: 0px;
    left: 60%;
}

第二，响应式设计。这比流体布局要先进一些。主要思想是为不同的浏览器尺寸编写不同的 CSS，以便您可以在多个尺寸中正确布局 HTML 元素。谷歌搜索它们之间的术语和比较。您需要对其进行一些研究才能理解这个概念。

【讨论】：

【解决方案5】：

也从您的圈子和 ID 样式中删除所有 ID：

<div class="header-circles">
    <div class="circle-container">...</div>
    <div class="circle-container">...</div>
    <div class="circle-container">...</div>
    <div class="circle-container">...</div>
</div>

像这样编辑.circle-container：

.circle-container {
width: 285px;
height: 285px;
display: inline-block;
}

将.a-circle 位置更改为相对位置：

.a-circle {
position: relative;   /*  <<--- changed  */
top: 35px;
left: 55px;
padding-left: 50px;
width: 175px;
height: 175px;
border: 2px solid #3498db;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);
}

像这样编辑.header-circles和#circles-content：

.header-circles {
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#circles-content {
background-color: #F0F0F0;
width: 100%;
}

完成

【讨论】：