在我的</p> <div>中插入<h1>或<p>标签打破布局</div> </h1>

时间：2013-09-13 20:38:51

标签： html css

每次我在我的div中插入一个标题标签或段落标签，它会大幅下降屏幕，我不确定是什么导致它有点超出我的深度我不知道该怎么做，我尝试将<h1>标记包装在下面的<div>示例中：

<div class="left">
<div>
<p>hello</p>
</div>
</div>

这没有任何区别，所以任何输入都会很好。

我的代码位于下方或查看我的jsFiddle：

这是问题的简化版本 jsFiddle

的index.html 

<div class="wrapper">
    <div class="header">
        <div class="wrap"> <span class="img_1"><img src="imgs/sjplogo.png" id="sjplogo"/></span>

             <h2>Website Service</h2>
 <span class="img_2"><img src="imgs/sslogo.png" id="sslogo"/></span>

        </div>
        <div class="maincontent">
            <div class="maincontentWrapper">
                <div class="topWrapper">
                    <div class="left"><p>hello</p></div>
                    <div class="center"></div>
                    <div class="right"></div>
                </div>
                <!--End topWrapper-->
                <div class="bottomWrapper">
                    <div class="leftBottom"></div>
                    <div class="rightBottom"></div>
                </div>
                <!--End bottomWrapper-->
            </div>
            <!-- End maincontentWrapper-->
        </div>
        <footer></footer>
    </div>

css / style.css

@charset “UTF-8”; 

/* CSS Document */

/********************************
* CSS Reset                     *
*********************************/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    background-color:#FFF;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/********************************
* Main Styles                   *
*********************************/
 .header {
    background: #062141;
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA2MjE0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzBmMmY0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #062141), color-stop(25%, #0f2f4e), color-stop(62%, #2b5878), color-stop(99%, #2b5878));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* IE10+ */
    background: linear-gradient(to bottom, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#062141', endColorstr='#2b5878', GradientType=0);
    /* IE6-8 */
    height:100px;
}
.header .wrap {
    width: 100%;
    margin: auto;
    text-align: center;
    position: relative;
}
.header .wrap .img_1, .header .wrap .img_2 {
    position: absolute;
    width: 100%;
    top: 5px;
}
.header .wrap .img_1 {
    left: 0;
}
.header .wrap .img_2 {
    right: 0;
}
.header h2 {
    text-align:center;
    font-size:40px;
    color:white;
    font-family:"ufonts com perpetua 2";
    line-height:100px;
}
#sjplogo {
    float:left;
}
#sslogo {
    float:right;
}
footer {
    background: #062141;
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA2MjE0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzBmMmY0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #062141), color-stop(25%, #0f2f4e), color-stop(62%, #2b5878), color-stop(99%, #2b5878));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* IE10+ */
    background: linear-gradient(to bottom, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#062141', endColorstr='#2b5878', GradientType=0);
    /* IE6-8 */
    height:100px;
    postion:absoutle;
    bottom:0;
}
.maincontent p {
    font-family:"ufonts com perpetua 2";
    font-size:16px;
    color:#001838;
    margin:10px;
}
/**STICKY FOOTER**/
 .fixedfooter {
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    height:50px;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    line-height:40px;
    /*gradient*/
    background: #062141;
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA2MjE0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzBmMmY0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #062141), color-stop(25%, #0f2f4e), color-stop(62%, #2b5878), color-stop(99%, #2b5878));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* IE10+ */
    background: linear-gradient(to bottom, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#062141', endColorstr='#2b5878', GradientType=0);
    /* IE6-8 */
}
.maincontent {
    width:100%;
    height:1000px;
    padding-bottom:20px;
}
.maincontentWrapper {
    margin:0px auto;
    width:100%;
    height:1000px;
}
.topWrapper {
    width:100%;
    text-align:center;
}
.left {
    width:200px;
    height:200px;
    background-color:red;
    display:inline-block;
    margin-right:20px;
}
.center {
    width:200px;
    height:200px;
    display:inline-block;
    background-color:blue;
    margin-right:20px;
}
.right {
    width:200px;
    height:200px;
    background-color:black;
    display:inline-block;
    margin-right:20px;
}

3 个答案:

答案 0 :(得分：3)

通过将vertical-align:top应用于inline-block元素，我取得了成功。

.right {
    width:200px;
    height:200px;
    background-color:black;
    display:inline-block;
    margin-right:20px;
    vertical-align:top;
}

http://jsfiddle.net/aS3Ec/9/

来自this answer的解释：

  

'内联块'的基线是其最后一个行框的基线   在正常流程中，除非它没有流入线框或者如果没有   它的'overflow'属性有一个除'visible'以外的计算值   在哪种情况下，基线是底部边缘。

答案 1 :(得分：0)

在topWrapper子元素上使用浮点数 http://jsfiddle.net/Ak6jP/ 

.left { 
  width:200px; 
  height:200px; 
  float: left; 
  background-color:red; 
  display:block;
  margin-right:20px;
 }

.center {
  width:200px;
  height:200px;
  float: left;
  display:block;
  background-color:blue;
  margin-right:20px;
}

.right {
  width:200px;
  height:200px;
  float: left;
  background-color:black;
  display:block;
  margin-right:20px;
}

您也可以使用新的flexbox布局： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 2 :(得分：-2)

line-height代码100px设置h2 <div>正确关闭{{1}}。

相关问题
最新问题