Question

尽管很简单，但这个网站似乎没有任何内容可以完全按照所示的那样解决这个问题。

我已经尝试了所有可以成像的内容，但并不满意。同样地，当我调整为稍微不同的场景设计的方法时，我对进入我页面的所有额外代码感到失望。

这基本上就是我想要实现的目标： full-screen and resized screen responsive layouts http://q-beans.ca/header/headerSKETCH2.png

请注意（2）调整大小的版本，标题背景的高度增加以容纳浮动的蓝色div。徽标大小不变。屏幕低于660px后，只有最右边的蓝色div的宽度会减小。

在我的尝试中，标题下方的居中内容保持居中。然而，标题并不愿意合作。当然，有一种简洁，有效的方法来编写标题，而不是javascript，涵盖了我一直缺少的东西。

Answer 1

首先关闭标题应该没有设置高度。那样，当元素堆叠标题时会扩展。第二，在媒体查询中，将蓝色和绿色元素设置为宽度：100％。那样他们就会堆叠。

你应该在PX中定义的宽度是你的容器元素，一个宽度为0 auto，宽度为800px的容器元素。在您的媒体查询中，只需将宽度设为320px。这样绿色和蓝色元素将扩展100％到宽度320px。

得到它？得到它了？好

Answer 2

DEMO： http://jsfiddle.net/kougiland/dx38K/1/

<section>
    <div>left</div>
    <div>right</div>
</section>

css

 @media screen and (max-width:600px) { 
                body { background:red; }
            }
@media screen and (max-width:340px) { 
                body { background:black; }
                section div {display: block;
clear: both;
margin: 0 auto;
    float: none!important;}
            }


*{
    -webkit-box-sizing:border-box;
}
section{
    text-align:center;
    color:white;
    width:100%;
    max-width:880px;
    margin:0 auto;
}
section div {
    float: left;
    padding:20px;
}


section div:nth-child(1){
   width:30%;
   max-width:220px;
   height:60px;
   background:red; 
}
section div:nth-child(2){
    width:70%;
   max-width:660px;
   height:60px;   
   background:green; 
}

DEMO： http://jsfiddle.net/kougiland/dx38K/1/

更新：请注意，您必须调整JSFIDDLE RUNVIEW才能看到行动

Answer 3

我认为你已经完成了与页面相关的所有编码，制作了所有的部门和其他内容。现在，当浏览器大小低于某个阈值（通过调整浏览器大小或仅使用ipad或iphone等）时，标题会自行调整大小：

在你的页面中， head 部分，添加：（通常，响应式网站的良好做法）

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

<link rel="stylesheet" type="text/css" href="_css/screen_styles.css" /><!-- for general styling of divisions-->
<link rel="stylesheet" type="text/css" href="_css/screen_layout_large.css" /><!-- for large normal screen sizes-->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="_css/screen_layout_medium.css" /><!-- for devices like ipad and other tabs -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="_css/screen_layout_small.css" /><!-- for devices like phones -->

首先，让我们说你的大屏幕，即 screen_layout_large.css

.header{
height: 80px;/*let's say that the height of the header and container, both are themselves 80px*/
......
}

.logo{
display:block;
float:left;
position:absolute;
width:220px;
height:80px;/* <= header height :whatever you want it to be*/ 
}

.content{/*the right part of the header*/
max-width:660px;
float:right;
    height: 80px;
}

然后，让我们说您的屏幕尺寸降至350px ，它会自动使用 screen_layout_small.css 你有：

.header{
height: 135px;/*( >= (.logo height) + (.content height)) : see below*/
....
}

.logo{
display:block;
float:left;
position:absolute;
width:220px;
height:60px;/*because you might want to reduce the size of your logo for smaller screens*/
}

.content{
min-width:320px;
float:right;
    height: 75px;/* same reason again*/
}

如需进一步的帮助或澄清，请发表评论。

好的，让我尝试一下新的事情，看看我们是否在同一页面上。

在你的页面中，我认为你已经有了这样的div：

<div class="header">
   <div class="container">
      <div class="logo">
      </div>
      <div class="content">
      </div>
   </div>
</div>

现在，无论你想要在高度上延伸什么来容纳漂浮的蓝色div，在这种情况下，都是这个问题的标题。

修改代码的结构，如下所示：

<div class="header">
   <div class="container">
      <div class="logo">
      </div>
      <div class="content">
      </div>
      <div class="clearfix">
      </div>
   </div>
   <div class="clearfix">
   </div>
</div>

现在，在你的screen_styles.css或main.css中（无论你做什么造型）：

.clearfix{
clear:both;
line-height:1px;
}

它的作用是，最外面的页面容器向下延伸以包含该div。由于该div出现在徽标和内容的各个div之后，并且本身没有浮动，因此最外层页面容器被强制增加其高度以包含该元素。

那是你在找什么？

Answer 4

演示到这里： Fiddle Demo

<强> HTML

<div class="page-content">
    <header>
        <div class="header-content">
            <div class="logo">LOGO HERE</div>
            <div class="content">HEADER CONTENT HERE</div>
        </div>
    </header>
</div>

<强> CSS

header {width:100%;background-color:gray;padding:20px 0;}
header .header-content {width:880px;margin:0px auto;}
header .logo {float:left;width:220px;height:50px;background-color:lightgreen;}
header .content {margin-left:220px;height:50px;background-color:cyan;}
@media screen and (max-width:900px) { 
    header .header-content {width:auto;margin:10px auto;min-width:340px;}
    header .logo {float:none;margin:10px auto;}
    header .content {margin:10px;width:auto;}
}

说什么???

通过将固定宽度徽标浮动到左侧，并将该宽度设置为主要内容的固定边距左侧值，我们得到头部内容元素以响应，并且基本上接管[headerWidth - logoWidth]剩余： - ）

创建一个多div，居中，响应的标头

4 个答案: