Question

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

当我使浏览器变小时，圆圈继续推进，但父div不会跟随100％的宽度。

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

我该如何解决这个问题？

HTML和CSS可以在这里的网站上看到： http://fsd.netii.net/

另外，我有兴趣成为一名前端开发人员，我正在构建我的html / css的方式，我定位所有内容的方式。这是最佳做法吗？我能否就我可以改进的内容得到反馈。

感谢。

Answer 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;
  }
}

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

Answer 2

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

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

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

Answer 3

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

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

将其display属性设置为inline-block：

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

Answer 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元素。谷歌他们之间的条款和比较。你需要对它进行一些研究才能理解这个概念。

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

完成

div不扩大100％，也请反馈

5 个答案: