Question

请检查以下代码，它在完整桌面视图中工作，当我尝试在响应式屏幕中检查时.topHeader不占用全宽。我试过宽度：100％但没有运气，请任何人解决这个问题。谢谢。

＆＃13;

.clearfix:before, .wrapper:before {
	display: table;
    content: " ";
}
.clearfix:after, .wrapper:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

.topHeader
{ 
background-color:#E8999A;
    box-sizing: border-box;}
.wrapper
{
	width: 1100px;
	margin:0px auto;
}
.headerLeft
{
	float:left;
}
#logo {padding:20px 0px;}
#logo img {width: 200px;}

＆＃13;

<div class="topHeader">
    	<div class="wrapper">
        	<div class="headerLeft">
            	<div id="logo">
                
                </div>
            </div>
            
        </div>
    </div>	
	<!--End Header -->

＆＃13;

Answer 1

将.wrapper设置为100％宽度，而不是1100px。

认为这样做。

Answer 2

删除.wrapper宽度以用于响应屏幕或将其设为自动：

.wrapper
{
    margin:0px auto;
}

Answer 3

似乎所有这些试图帮助的人都无法理解你究竟在寻找什么以及你的问题是什么。你必须清楚地解释你想要实现的目标。

试一试。我添加了“min-width：1100px;”进入“topHeader”。

片段中的clearfix有什么意义？删除不需要/不相关的代码以供参考。这令我们感到困惑。

body, html {
  margin:0;
  padding:0;
}
.clearfix:before, .wrapper:before {
  content: " ";
  display: table;
}
.clearfix:after, .wrapper:after {    
  clear:both;
  content:" ";
  display:block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}
.topHeader { 
  background-color:#E8999A;
  box-sizing: border-box;
  min-width: 1100px;
}
.wrapper {
  margin:0px auto;	
  width:1100px;
}
.headerLeft {
  float:left;
}
#logo {
  padding:20px 0px;
}
#logo img {
  width:200px;
}

<div class="topHeader">
  <div class="wrapper">
    <div class="headerLeft">
      <div id="logo"></div>
    </div>  
  </div>
</div>

响应问题 - HTML

3 个答案: