如何在HTML / CSS中做响应包装？

Question

这就是包装器的全宽

但是，当我将屏幕最小化为移动格式时，包装器看起来像这样

你看到有一个黑色区域。我希望红色边条能够填满它，所以它不会是黑色的。

.body {
  overflow: hidden;
}
#wrapper {
  max-width: 1520px;
  height: 880px;
  margin: 0 auto;
  background-color: black;
  width: 100%;
}
#mcontent {
  min-width: 500px;
  max-width: 1520px;
  height: 500px;
  width: auto;
  background-color: fuchsia;
  overflow: hidden;
  padding:
}
#rscontent {
  max-width: 200px;
  min-width: 100px;
  height: 500px;
  background-color: red;
  float:right;
  display: inline-block;
  width: auto;
}
#lscontent {
  max-width: 200px;
  min-width: 100px;
  height: 500px;
  background-color: red;
  float:left;
  display: inline-block;
  width: auto;
}
#content {
  height: 400px;
  max-width: 1920px;
  width: auto;
  background-color: darkviolet;
}
#content > h2 {
  color:blue;
  text-align: center;
  width: auto;
}
#content > p {
  text-align: center;
}
#content > h3 {
  text-align: center;
}
#content > h4 {
  text-align: center;
}

<div id="wrapper"> 
  <div id="content">
    <h2>AgencyGaming</h2>
    <h3>Slogan</h3>
    <h4>Information</h4>
  </div>
  <div id="rscontent"></div>
  <div id="lscontent"></div>
  <div id="mcontent">
    <h2 style="color:white;">Hej</h2>
  </div>
</div>

Answer 1

内容的最小宽度为500px。它可以在桌面上正常工作，但在移动格式中，窗口的宽度小于500px，#mcontent div的宽度将减小到500px。由于min-width:500px，它不会减少500px，因此#mcontent div会在下一行继续。

Answer 2

删除左侧和右侧div的min-width设置。

Answer 3

您还可以使用 Flexbox 通过以下代码

实现所需的布局

<强> HTML

<div id="wrapper"> 
  <div id="content">
    <h2>AgencyGaming</h2>
    <h3>Slogan</h3>
    <h4>Information</h4>
  </div>
  <div id="rscontent"></div>
  <div id="mcontent">
    <h2 style="color:white;">Hej</h2>
  </div>
  <div id="lscontent"></div>
</div>

<强> CSS

#wrapper {
  max-width: 1520px;
  background-color: black;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#mcontent {
  flex: 1;
  background-color: fuchsia;
  min-height: 500px;
}

#rscontent, #lscontent {
  max-width: 200px;
  min-width: 100px;
  background-color: red;
}

#content {
  flex: 0 0 100%;
  min-height: 400px;
  text-align: center;
  background-color: darkviolet;
}

#content > h2 {
  color:blue;
}

＆＃13;

＆＃13;

#wrapper {
  max-width: 1520px;
  background-color: black;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#mcontent {
  flex: 1;
  background-color: fuchsia;
  min-height: 500px;
}
#rscontent,
#lscontent {
  max-width: 200px;
  min-width: 100px;
  background-color: red;
}
#content {
  flex: 0 0 100%;
  min-height: 400px;
  text-align: center;
  background-color: darkviolet;
}
#content > h2 {
  color: blue;
}

＆＃13;

<div id="wrapper">
  <div id="content">
    <h2>AgencyGaming</h2>
    <h3>Slogan</h3>
    <h4>Information</h4>
  </div>
  <div id="rscontent"></div>
  <div id="mcontent">
    <h2 style="color:white;">Hej</h2>
  </div>
  <div id="lscontent"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我建议您从DECLARE @sql VARCHAR(1000) DECLARE @name sysname DECLARE mycursor CURSOR FAST_FORWARD FOR SELECT name FROM sys.tables OPEN mycursor FETCH NEXT FROM mycursor INTO @name WHILE @@FETCH_STATUS = 0 BEGIN SET @sql = 'bcp "select ''' + replace(@name,'''','''''') + '''" queryout "c:\temp\' + @name + '.txt" -c -UTF8 -T -Slocalhost"' EXEC master..xp_cmdshell @sql FETCH NEXT FROM mycursor INTO @name END CLOSE mycursor DEALLOCATE mycursor 删除min-width并尝试在#mcontent中使用width代替%或减少px至少min-width。