divs没有100%扩展，也请反馈

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中为.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;
  }
}

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

的想法

之所以会发生这种情况，是因为您正在绝对定位圆元素：

#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%;
}

将其显示属性设置为内联块：

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

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

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

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

根据我的理解，您正在询问如何在浏览器宽度发生变化时使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元素。用谷歌搜索术语及其比较。你需要对它进行一些研究才能理解这个概念。

从你的圆圈和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%;
}

完成

相关内容

最新更新

热门标签：