主页 / 问题 / 853134
Accepted
Alex
Asked:2020-07-11 18:53:12 +0000 UTC2020-07-11 18:53:12 +0000 UTC

如何修复“浮动：左”下的样式？

  • 772

如何正确设置样式，使块 v1 和 v2 在小屏幕上始终处于水平线上？就像图片中一样： 在此处输入图像描述

同时，以免在大屏幕上打破这种对齐方式： 在此处输入图像描述

在下面的代码中，在一个小屏幕上，它只能在很短的时间间隔内正常工作，否则它会像这样中断：

在此处输入图像描述

<style>
@media screen and (min-width: 428px) { /*Большой экран*/
    #aaa {float: left; width: 230px;}
    #vs1 {display : none;}
    #bbb {float: left; width: 170px;}
    #vs2 {display : block; clear: left;}
    #ccc {clear: left;}
}

@media screen and (max-width: 428px) { /*Маленький экран*/
    #aaa {width: 400px;}
    #vs1 {display: block;}
    #vs2 {display: none;}
    #bbb {width: 400px;}
}
</style>
</head>  
<body>

<div id="ab" style="">

       <div id="aaa" style="height: 200px; background-color: lightgreen; opacity: 0.3;">A</div>
       <div id="vs1">
               <div id="v1" style="float: left; width: 300px; height: 40px; background-color: orange; opacity: 0.3;">v1</div>
               <div id="v2" style="float: left; width: 100px; height: 40px; background-color: khaki; opacity: 0.3;">v2</div>
       </div>
       <div id="bbb" style="height: 200px; background-color: lightblue; opacity: 0.3;">B</div>

</div>       
<div id="vs2">
               <div id="v3" style="float: left; width: 300px; height: 40px; background-color: brown; opacity: 0.3;">v3</div>
               <div id="v4" style="float: left; width: 100px; height: 40px; background-color: yellow; opacity: 0.3;">v4</div>
</div>


<div id="ccc" style="width: 400px; height: 22px; background-color: red;">C</div>

</body>
css3

1 个回答

  1. Best Answer

    如果我们谈论响应式布局，那么块不应该有任何绝对宽度——这会在调整窗口大小时不断破坏布局。当然，如果需要针对特定​​设备/窗口调整输出，那么这些情况应该单独分析。

    #vs1在您的示例中，输出中断是因为容器在小屏幕上没有高度。最初，它等于0，因为嵌套在其中的所有块都带有float:left;，因此块 B 离开它们。

    使用flex. 适用于所有屏幕宽度，同时保持块的纵横比。如果您需要限制最小宽度 - 将 min-width 添加到必要的块中，您会很高兴；）

    body {
  margin: 0;
}
#v1, #v2, #v3, #v4 {
  height: 40px;
  opacity: 0.3;
}
#v1, #v3 {
  width: 75%;
}
#v2, #v4 {
  width: 25%;
}
#aaa, #bbb {
  height: 200px;
  opacity: 0.3;
}
#ccc {
  width: 100%;
}

@media screen and (min-width: 428px) {
  /*Большой экран*/
  #ab {
    display: flex;
    width: 100%;
  }
  #aaa {
    width: 57.5%;
  }
  #vs1 {
    display: none;
  }
  #bbb {
    width: 42.5%;
  }
  #vs2 {
    display: flex;
  }
}

@media screen and (max-width: 428px) {
  /*Маленький экран*/
  #aaa {
    width: 100%;
  }
  #vs1 {
    display: flex;
  }
  #vs2 {
    display: none;
  }
  #bbb {
    width: 100%;
  }
}
    <div id="ab" style="">
  <div id="aaa" style="background-color: lightgreen;">A</div>
  <div id="vs1">
    <div id="v1" style="background-color: orange;">v1</div>
    <div id="v2" style="background-color: khaki;">v2</div>
  </div>
  <div id="bbb" style="background-color: lightblue;">B</div>
</div>

<div id="vs2">
  <div id="v3" style="background-color: brown;">v3</div>
  <div id="v4" style="background-color: yellow;">v4</div>
</div>

<div id="ccc" style="height: 22px; background-color: red;">C</div>

    • 1

相关问题