html - 如何让这个带有 float 响应的div？

Question

我做了一个小的 html 字段，现在我试图让它响应。 为了清楚起见，我制作了一张图片，显示在较小的屏幕上时字段应该如何移动。 How it should be

在弄清楚几个小时后，我得到了这个解决方案，它在桌面上运行良好，但在较小的屏幕上运行不佳。 Logo 没有移动到顶部，而是保留在左侧。

有人可以帮我解决这个问题吗？

代码如下:

    <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 (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>