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

使用以下css代码显示内联：display: inline＆amp; float: left

除此之外......您实际上是浮动元素，而不是内联显示。 display:inline规则与此无关，因为浮动元素隐式显示为块。

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

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

或者，使所有列容器动态化并为它们指定百分比宽度，以便它们以可用宽度进行弯曲。例如。分别为20％，60％和20％。虽然这可能会使某些窗口尺寸的宽度太小或太大。您可以添加min-width和max-width（使用绝对金额）来限制此操作。但是在宽度较窄的情况height:80px是不够的，如果您的设计允许您的#Header灵活变通，那么min-height:80px可能更合适？

Answer 2

使用百分比，请确保列上没有填充。填充将增加一些宽度。对于标题，可以使用position：fixed，对于IE6和7，使用position：absolute（position：fixed）对它们不起作用。对于列，您可以添加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%;
}

希望它能帮到你： - ）

CSS帮助定位div内联

2 个答案: