Question

我目前很难创建响应式的顶栏＆＃39;在摆弄时。

我使用标准笔记本电脑大小的显示器时，我已经正常创建并正常工作，但当我尝试将屏幕尺寸调整为移动尺寸时，我无法确定如何保留我的内容漂浮在视野之内。

我目前使用2个div作为示例。 top-bar-holder是一个容器div，top-bar用于将内容保持为某个最大宽度。

我还使用了一个两元组表，我只是在这个例子中使用了每个图像。通过尝试调整视口大小可以看到问题，图像向左消失而不是停留在屏幕上。

我附上了一个小提琴，以便更好地解释。

请问我在这个问题上是否还不够详细。

＆＃13;

.top-bar-holder {
  position:fixed;
	width:100%; 
	height:70px; 
	background-color:#384452;  
  z-index:1;
}

.top-bar {
  position:relative;
  max-width:1100px; 
  width:100%; 
  border:1px solid orange; 
  height:70px; 
  left:50%; 
  margin-left:-550px;
}

.top-bar table tr th { 
  border:1px solid green;
  height:65px;
  max-width:50%; 
}

＆＃13;

<div class="top-bar-holder"> 
			<div class="top-bar"> 
				<table style="width:100%"> 
					<tr> 
						<th> <img src="company-logo.png" width:"120" height="55" /> </th>
						<th> <img src="company-logo.png" width:"120" height="55" /> </th>
					</tr>
				</table>
			</div>
		</div>

＆＃13;

Answer 1

在我回答之前 - 您应该避免使用表格进行布局（如果您对此有疑问，快速谷歌搜索会做得很好）

.top-bar的定位导致了问题

.top-bar {
  left:50%; 
  margin-left:-550px;
}

这是你当前的css - margin-left将始终保持在550px。如果您的显示小于此值，则最终没有内容。通常，商定水平居中的方法是将水平边距设置为自动。将上面的css更改为此

.top-bar {
  margin:0 auto;
}

这与使用

相同

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

并按照我的意图将您的标题内容集中在一起;以及修复屏幕问题

创建响应式＆＃39; topbar＆＃39;

1 个答案: