2

我需要帮助解决经常发生的反复出现的问题。我想创建一个包含 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;
}
4

2 回答 2

2

使用以下 CSS 代码内联显示它们：display: inline&float: left

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

但无论如何，你的问题是你的部分都是固定宽度（200 + 560 + 200 = 960px），所以当浏览器窗口减小到接近这个宽度（960px加上你的页边距多一点）时，设计正在进行打破 - 你的容器包装。

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

或者，使所有列容器动态化并给它们百分比宽度，以便它们随着可用宽度弯曲。例如。分别为 20%、60% 和 20%。尽管这可能会使某些窗口尺寸的宽度过小或过大。您可以添加一个min-width和max-width（绝对数量）来限制这一点。但是在狭窄的宽度height:80px上是不够的，所以min-height:80px如果您的设计允许您的#Header 灵活，那么可能会更合适？

于 2012-09-09T09:40:13.710 回答
0

使用百分比，请确保您的列上没有填充。填充将增加一些宽度。对于您的标题，您可以使用位置：固定，而对于 IE6 和 7，使用位置：绝对（位置：固定）对它们不起作用。对于列，您可以添加 clearfix 方法，该方法可以帮助您毫无问题地放置其余内容。您的 HTML 可以是这样的：

<div id="header" class="clearfix">
  <div id="col01">Column 01</div>
  <div id="col02">Column 02</div>
  <div id="col03">Colunm 03</div>
</div>

和 CSS ：

    #header {
    position: fixed;
    height:80px;
    width:100%;
    }

    #col01,
    #col02,
    #col03 {
    float:left;
    }
    #col01,
    #col03 {
    width:20%;
    }
    #col02 {
    width:60%;
    }
    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .clearfix {
        display: inline-block;
    }

    html[xmlns] .clearfix {
        display: block;
    }


* html .clearfix {
    height: 1%;
}

希望它对你有帮助:-)

于 2012-09-10T18:48:38.140 回答