Question

我做了一个小的html字段，现在我试图使其响应。为了清楚起见，我对在较小屏幕上显示字段时应如何移动进行了描述。 How it should be

计算了几个小时后，我得到了这个解决方案，该解决方案在台式机上运行良好，但在较小的屏幕上却无法运行。徽标不会移到顶部，而是保留在左侧。

有人可以帮我吗？

代码如下：

    <div style="background-color: orange; color: white; width: 30%; padding: 4px 4px; text-align: center; margin:0">Stackoverflow</div>
<div style="background-color: #f9f9f9; border: 2px solid orange; max-width:800px; overflow: auto;">
    <div style="float: left;width: 30%; overflow: auto;"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7A3wAuudoXw8butMA-wxJdWYdUlNbWjC6EOV3iXnrUf08dwX3PA" /></div>
    <div style="float:left;width:70%">
            <div style="text-align: center; font-size: 12pt; background-color:lightgreen">Some Informations
            </div>  
            <div>     
              <div style="float: left; background-color: lightblue; width:50%">
                  <ul>
                <li>Owner: Stack Exchange, Inc.</li>
                <li>Available in: Englisch, Spanisch, Russian, Portuguese ...</li>
                <li>Type of site: Knowledge markets</li>
              </ul> 
          </div>
          <div style="float: right; background-color: lightgrey; width:50%; padding:5px">
              <ul>
                <li>Website: stackoverflow.com</li>
                <li>Commercial: Yes</li>
                <li>Registration: Optional</li>
              </ul>

            <div style="float: left; width: auto; background-color:yellow">Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network, created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on a wide range of topics in computer programming.
            </div>
            <div style="clear:both;text-align: center;"><a href="https://www.stockoverflow.com"> <input type="button" value="Go to the Website" /></a>
            </div>

    </div>
</div>

Answer 1

要根据屏幕分辨率更改样式，可以使用media query

@media (max-width: 1024px) { 
   .logo{
      width: 100%;
   }
}

向您的元素中添加类，以便能够使用特定的CSS规则定位它们：

<div style="float: left;width: 30%; overflow: auto;">

成为

<div class = "logo">
...
<style>
    .logo{
      float: left;
      width: 30%;
      overflow: auto;
    }
</style>

Answer 2

您不能对内联样式进行响应。样式分开后，就可以使用@media查询来根据屏幕大小来设置元素样式

* {
    box-sizing: border-box;
}
.tab {
  background-color: orange;
  color: white;
  width: 30%;
  padding: 4px 4px;
  text-align: center;
  margin: 0
}

.wrapper {
  background-color: #f9f9f9;
  border: 2px solid orange;
  max-width: 800px;
  overflow: auto;
}

.logo {
  text-align: center;
}
@media (min-width: 640px) {
  .logo {
    float: left;
    width: 30%;
    overflow: auto;
  }
  .main {
    float: left;
    width: 70%
  }
}

.row:before,
.row:after {
    display: table;
    content: " ";
}

.row:after {
    clear: both;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 5px;
}

.col {
  margin: 0 5px;
  width: calc(50% - 10px);
}

.col-left {
  float: left;
  background-color: lightblue;
}

.col-right {
  float: right;
  background-color: lightgrey;
  padding: 5px
}

.highlight {
  float: none;
  width: auto;
  background-color: yellow;
  margin-bottom: 10px;
}

<div class="tab">Stackoverflow</div>
<div class="wrapper">
  <div class="logo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7A3wAuudoXw8butMA-wxJdWYdUlNbWjC6EOV3iXnrUf08dwX3PA" /></div>
  <div class="main">
    <div style="text-align: center; font-size: 12pt; background-color:lightgreen">Some Informations
    </div>
    <div class="row">
      <div class="col col-left">
        <ul>
          <li>Owner: Stack Exchange, Inc.</li>
          <li>Available in: Englisch, Spanisch, Russian, Portuguese ...</li>
          <li>Type of site: Knowledge markets</li>
        </ul>
      </div>
      <div class="col col-right">
        <ul>
          <li>Website: stackoverflow.com</li>
          <li>Commercial: Yes</li>
          <li>Registration: Optional</li>
        </ul>
      </div>
    </div>
    <div class="highlight">Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network, created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on a wide range of topics in computer programming.
    </div>
    <div style="clear:both;text-align: center;">
      <a href="https://www.stockoverflow.com"> <input type="button" value="Go to the Website" /></a>
    </div>

  </div>
  <!-- /.main -->
</div>
<!-- /.wrapper -->

Answer 3

您的HTML结构还不错，即使您的样式代码位于.css文件中会更好，如果是这种情况，请尝试一下。

无论如何，在您的移动结构中，您将拥有3个主要容器：

主容器
- 图像容器
- 内容

您的主容器内部有 image-container 和 content ，但是在您的情况下，两者都为反派， float：left ，这东西会将所有内容设置在自己的左边，周围是其他对象。

我建议您更改 浮动：向左 ，并开始使用 display：flex ，您可以在互联网上找到大量有关它的信息，以帮助您构建非常精细的结构，这些结构将遵循您将为其构建的任何规则。

Answer 4

谢谢大家，我根据您的回答提出了解决方案。我用display：flex，flex-wrap：wrap和@media做到了。

为此，我将整个“盒子的主体”分为一个徽标容器和一个文本字段容器（几乎像以前一样），并提供了两个flex属性。在文本字段中，我使用了float（像以前一样）。

对于较小的屏幕，我将flex-direction更改为column，现在可以按我想要的方式工作了。

如何使这个带有浮点数的div响应？

4 个答案: