Question

那些人，我正在学习Web开发的基础知识。我在页面中使用了两个字段集作为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 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进行响应式设计。像素的使用不是一个好习惯，也不能为您提供响应式设计

您可以考虑使用display：flex作为相同的

，而不是摆弄浮动

检查此代码段

#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

在这种情况下，您可以采取三种方法。

自适应方法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

网站布局不固定

3 个答案: