网站布局不固定

Question

伙计们，我正在学习网站开发的基础知识。我在网页使用的两个字段集如CSS ID

#lfieldset 
{ 
    width: 1019px; 
    height: 500px; 
    background: #ffffff; 
    border-radius: 8px; 
    border: none; 
    float: left; 
} 
#rfieldset 
{ 
    width: 300px; 
    height: 200px; 
    background: #ffffff; 
    border-radius: 8px; 
    border: none; 
    float: right; 
} 

这是它的外观

Screenshot1

和meta标签

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

布局，但第二个字段集如果我缩小窗户，请到底部，请参阅

Screenshot2

我该如何解决这个问题？

Answer 1

您应该使用％而不是px来管理字段集的大小。

#lfieldset 
{ 
    width: 80%; 
    height: 500px; 
    background: #ffffff; 
    border-radius: 8px; 
    border: none; 
    float: left; 
} 
#rfieldset 
{ 
    width: 20%; 
    height: 200px; 
    background: #ffffff; 
    border-radius: 8px; 
    border: none; 
    float: right; 
} 

，如果你想保持对那些规模另一种选择，使用calc函数来设置宽度：

#lfieldset 
{ 
    width: calc(100% - 300px); 
    height: 500px; 
    background: #ffffff; 
    border-radius: 8px; 
    border: none; 
    float: left; 
} 
#rfieldset 
{ 
    width: 300px; 
    height: 200px; 
    background: #ffffff; 
    border-radius: 8px; 
    border: none; 
    float: right; 
} 

Answer 2

使用％或EMS的响应式设计。像素的用法是不是一个好的做法，不会给你一个响应式设计

而是用浮漂左右摆弄，你可以考虑使用显示：弯曲为同一

检查这个片段

#lfieldset { 
 
    width: 90%; 
 
    height: 50%; 
 
    background: #ffffff; 
 
    border-radius: 8px; 
 
    border: none; 
 
} 
 
#rfieldset { 
 
    width: 10%; 
 
    height: 20%; 
 
    background: #ffffff; 
 
    border-radius: 8px; 
 
    border: none; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border: 1px solid; 
 
}

<div class="wrapper"> 
 
    <feildset id="lfieldset"> 
 
    this is left 
 
    </feildset> 
 
    <feildset id="rfieldset"> 
 
    this is right 
 
    </feildset> 
 
</div>

希望它可以帮助

Answer 3

既然你刚开始LEA请注意0​​模型（使用浮点数）被认为是不推荐用于布局。您应该使用flexbox模型，功能更强大，功能更强大。除了能够使用%（对实际内容不总是有用的），您可以有一列或多列固定宽度和另一个灵活列。这里有一个例子，从你所拥有的开始：

body { 
 
    margin: 0; padding: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    min-height: 100vh; 
 
} 
 
.wrapper fieldset { 
 
    flex: 1 1 auto; 
 
    margin: 10px; 
 
} 
 
.wrapper fieldset + fieldset { 
 
    margin-left: 0; 
 
} 
 

 
#rfieldset { 
 
    max-width: 240px; 
 
} 
 
@media (max-width: 500px) { 
 
    .wrapper { 
 
    flex-wrap: wrap; 
 
    } 
 
    .wrapper fieldset { 
 
    flex: 1 1 100%; 
 
    
 
    } 
 
    .wrapper fieldset + fieldset { 
 
    margin-left: 10px; 
 
    margin-top: 0; 
 
    } 
 
    #rfieldset { 
 
    max-width: initial; 
 
    } 
 
}

<div class="wrapper"> 
 
    <fieldset id="lfieldset"> 
 
    <legend>left fieldset</legend> 
 
    this content is flexible, depending on browser window 
 
    </fieldset> 
 
    <fieldset id="rfieldset"> 
 
    <legend>right fieldset</legend> 
 
    this content has fixed size. On small devices it can shrink or wrap below the left column. In this example I made it wrap. 
 
    </fieldset> 
 
</div>

Answer 4

有你可以在这种情况下，三种方法。

响应方法1：在这里的元件将在percentage或em或rem使用宽度：

#lfieldset 
{ 
    width: 80%; 
    height: 500px; 
    float: left; 
} 

#rfieldset 
{ 
    width: 20%; 
    height: 200px; 
    float: left; 
} 

响应方法2：每当浏览器的宽度减小，使元件堆叠一个下面的另一个。你目前正在做类似的事情。更好的版本是：

#lfieldset 
{ 
    width: 80%; 
    height: 500px; 
    float: left; 
} 

#rfieldset 
{ 
    width: 20%; 
    height: 200px; 
    float: left; 
} 
@media only screen and (max-width: 768px) { 
    #lfieldset 
    { 
     width: 100%; 
     float: none; 
    } 

    #rfieldset 
    { 
     width: 20%; 
     float: none; 
    } 
} 

固定方法：要有水平滚动条。在这种情况下，你必须创建一个包装元素：

<div class="wrapper"> 
    <fieldset id="lfieldset"></fieldset> 
    <fieldset id="rfieldset"></fieldset> 
</div> 

/* CSS */ 
#lfieldset 
{ 
    width: 1019px; 
    height: 500px; 
    float: left; 
} 

#rfieldset 
{ 
    width: 300px; 
    height: 200px; 
    float: left; 
} 

.wrapper { 
    width: 1319px; /* Sum of 1019px + 300px */ 
} 

在这种方法中，当您减少浏览器的大小，你会得到水平滚动条。

请注意：我是不是使用float: right即使是rfieldset。使用左浮动将确保当向右推动右时，你仍然可以得到正确的左对齐。作为初学者，您可能想知道我在响应式方法2中使用的语法。它是来自CSS3的媒体查询。根据您的要求选择您的解决方案（响应式布局与使用水平滚动条的固定布局）。

为了进一步理解在CSS不同布局技术，经过： http://www.slideshare.net/HarshalPatil4/css-layout-techniques