html - 流体设计的 float 中断

Question

编辑:我已经检查过，我认为是右侧的图像造成了问题，就好像我删除了图像一样，一切都很好，无论如何确保图像随设计调整大小，我使用了最大宽度:100% 用于图像，但在某些时候我猜它不会调整大小。

编辑:请调整结果页面的大小以了解问题，左侧区域而不是 float 到底部，即使它是流体大小设计

由于右侧的图像在调整大小时 float 中断，我添加了最大宽度 100% 仍然中断。是否有解决方案可以调整大小，但不会中断？

 <header>
                <div id="branding"> <a href="#"><img src="img/logo.png" width="542" height="120" alt=""/></a> 
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
                </div>
        </header>


                <section>
                <div id="content">
                <h2>Wir arbeiten an der Erstellung 
        unserer <strong>Internetpräsenz</strong></h2></div>
                </section>

CSS:

html, body {
    width:100%;
    height: 100%;
    margin:0px;
    padding:0px;
    font-family: 'Open Sans', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

@media \0screen {
  img { 
    width: auto; /* for ie 8 */
  }
}

header {
    width: 35%;
    height: 100%;
    background: white;
    float: right;
    display: table;
}


section {
    width: 65%;
    height: 100%;
    background-color: #e51b24;
    float: left;
    display: table;
}

/* Logo and Address Styling */

#branding {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
    padding:10%;
}

#branding p {
    text-align: left;
    padding-left: 5px;
    color: #717171;
    font-size: 23px;
    line-height:1.5em;
}
#branding a {
    color: #717171;
    text-decoration: underline;
}


/* Main Content Styling */

#content {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    color:white;
    padding:8%;
}

#content h2{
    font-weight:normal;
    font-size:70px;
    line-height:1.3em;
}

JS fiddle 预览:http://jsfiddle.net/Uv9Wp/embedded/result/

http://jsfiddle.net/Uv9Wp/

Answer 1

这应该是您要查找的内容:

FIDDLE

我更改了 HTML 标记的顺序，以便能够在 section 和 header 上应用 table-cell 属性(并删除了填充在他们的 child 身上)。

HTML:

<section>
    <div id="content">
         <h2>Wir arbeiten an der Erstellung 
    unserer <strong>Internetpräsenz</strong></h2>
    </div>
</section>

<header>
    <div id="branding"> <a href="#"><img src="http://froggyadventures.com/wp-content/uploads/galleries/post-93/full/placeholder%20-%20Copy%20%282%29.gif" width="542" height="120" alt=""/></a> 
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
</header>

CSS:

html, body {
    width:100%;
    height: 100%;
    margin:0px;
    padding:0px;
    font-family:'Open Sans', sans-serif;
}
body{display:table;}
img {
    max-width: 100%;
    height: auto;
}
@media \0screen {
    img {
        width: auto;
        /* for ie 8 */
    }
}
header {
    width: 35%;
    height: 100%;
    background: white;
    display: table-cell;
    vertical-align: middle;
}
section {
    width: 65%;
    height: 100%;
    background-color: #e51b24;
    display: table-cell;
    vertical-align: middle;
}
/* Logo and Address Styling */
 #branding {    
    text-align: center;
    padding:10%;
    width: 80%;
}
#branding p {
    text-align: left;
    padding-left: 5px;
    color: #717171;
    font-size: 23px;
    line-height:1.5em;
}
#branding a {
    color: #717171;
    text-decoration: underline;
}
/* Main Content Styling */
 #content {
    width: 84%;
    padding:8%;
    text-align:left;
    color:white;
}
#content h2 {
    font-weight:normal;
    font-size:60px;
    line-height:1.3em;
}