html - CSS 帮助定位 div 内联

Question

我需要帮助解决经常发生的重复出现的问题。我想创建一个由 3 个内联部分组成的标题。我使用以下 css 代码内联显示它们: display: inline & float: left问题是，当我调整浏览器窗口大小时，最后一个 div 被推下并且不内联显示。我知道这听起来像是我很挑剔，但我不希望设计随着访客改变显示器屏幕而扭曲。我在下面提供了我正在使用的 html 和 css 代码。希望我已经解释得足够好。提前致谢。

HTML

<div class="masthead-wrapper">
&nbsp;
</div>

<div class="searchbar-wrapper">
&nbsp;
</div>

<div class="profile-menu-wrapper">
&nbsp;
</div>

CSS

#Header {
  display: block;
  width: 100%;
  height: 80px;
  background: #C0C0C0;
}
.masthead-wrapper {
  display: inline;
  float: left;
  width: 200px;
  height: 80px;
  background: #3b5998;
}
.searchbar-wrapper {
  display: inline;
  float: left;
  width: 560px;
  height: 80px;
  background: #FF0000;
}
.profile-menu-wrapper {
  display: inline;
  float: left;
  width: 200px;
  height: 80px;
  background: #00FF00;
}

Answer 1

display them inline using the following css code: display: inline & float: left

旁白...您实际上是 float 元素，而不是内联显示它。 display:inline 规则在这里无关紧要，因为 float 元素隐式显示为 block。

但无论如何，你的问题是你的部分都是固定宽度的(200 + 560 + 200 = 960px)，所以当浏览器窗口缩小到接近这个宽度(960px加上页边距多一点)时设计将会被打破——你的容器被包裹起来。

如果您仍然希望这些容器具有固定宽度并简单地在较小的浏览器窗口上进行裁剪，那么您可以将 overflow:hidden 添加到 #Header。至少它不会将 #Header 高度降低到超过 80px (这是您似乎遇到的问题)。但内容将隐藏在较小的屏幕上。

或者，使所有列容器动态化并赋予它们百分比宽度，以便它们根据可用宽度进行 flex 。例如。分别为20%、60%和20%。尽管这可能会使某些窗口尺寸的宽度太小或太大。您可以添加 min-width 和 max-width (带有绝对数量)来限制这一点。但在窄宽度时 height:80px 是不够的，所以 min-height:80px 可能更合适，如果您的设计允许 #Header灵活吗？