Question

编辑：我已经检查了，我认为它的右侧图像正在创建问题，好像我删除图像一切都很好，无论如何确保图像调整大小与设计，我使用了最大宽度：100％的图像，但在某一点后，我猜它没有调整大小。

编辑：请调整结果页面的大小以了解问题，左边区域而不是浮动到底部，即使它的流量大小设计

由于右侧的图像浮动在调整大小时断开，我添加了最大宽度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小提琴预览：http://jsfiddle.net/Uv9Wp/embedded/result/

http://jsfiddle.net/Uv9Wp/

Answer 1

这应该是你要找的东西：

<强> FIDDLE

我更改了HTML标记的顺序，以便能够在table-cell和section上添加header属性（并删除其子项上的填充）。

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;
}

Answer 2

从标题和部分中删除显示表。这应该让他们彼此相邻。

Answer 3

所以看起来它之所以发生的原因是因为红色容器中的文本空间不足。 “Internetpräsenz”这个词不能打破新的一行，所以整个容器都会掉下来。

我建议使用媒体查询创建一些断点，缩小字体大小以获得较小的分辨率。

以下是有关媒体查询以及如何使用它们的精彩内容：http://css-tricks.com/css-media-queries/

这是一个实际的例子：

http://jsfiddle.net/Uv9Wp/5/

@media all and (max-width: 800px) {
    #content{padding:4%}
    #content h2{font-size:14px;}
}

浮子破裂用于流体设计

3 个答案: