溢出到下一个DIV

时间：2013-08-16 01:45:36

标签： css html 

   <html>
    <head>
    <title>Pixafy</title>
    <style>
    html { 
      background: url(wp.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.wp.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wp.jpg', sizingMethod='scale')";
    padding-top: 50px;
    }
        #ldiv {
            vertical-align: top;
            height: 120px;
            width: 40%;
            color:#ccc;
            float: left;
            position: relative;
            border: 1px solid yellow;
        }

        #rdiv {
            vertical-align: top;
            float: left;
            width: 40%;
            border: 1px solid blue;
            height: 120px;
        }
        #ctr {
            vertical-align: middle;
            width: 80%;
            height: 150px;
            border: 1px solid white;
            background:url(mid.png) no-repeat center center;
        }
        #container1 {
            vertical align: top;
            width: 80%;
            height: 300px;
            border: 1px solid green;
            background-color: #E3E3E3;
        }
        #container2 {
            vertical align: top;
            width: 80%;
            height: 250px;
            border: 1px solid green;
            background-color: #000000;
        }
        #text1 {
            align: left;
            width: 80%;
            color: #000000;
            font-family: Arial, Vedana, Tahoma;
            font-size: 24px;
            font-weight: bold;
        }
        #space {
            height: 25px;
            border: 1px solid purple;
            width: 80%;
        }
    ul {
    list-style-type: none;
    height: 80px;
    width: 500px;
    margin: auto;
    }
    li {
    float: left;
    }
    ul a {
    background-color: #29281E;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    display: block;
    line-height: 22px;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, "Times New Roman", Times, serif;
    font-size: 14px;
    color: #D6D7D8;
    }
    .clear-both {
        clear: both;
    }
    #text2 {
        width: 70%;
        border: 1px solid #00CCFF;
        color: #000000;
        font-size: 16px;
        font-family: Arial, Verdana, Tahoma;
        font-weight: bold;
    }
    #btn {
        width 10%;
        border: 1px solid #FFCC00;
        vertical-align:bottom;
    }
    .btnlearn {
    clear:both;
    width:125px;
    height:40px;
    background:#E55D22;
    text-align:center;
    line-height:40px;
    color:#FFFFFF;
    font-size:12px;
    font-weight:bold;
    cursor: pointer;
    }
    .btnlearn:hover {
        text-decoration: underline;
        cursor: pointer;
    }
    #rcw {
        width: 80%;
        color: #BAB8B8;
        font-size: 18px;
        font-size: Arial, Verdana, Tahoma;
    }
    #left
    {
    width: 33%;
    float: left;
    border: 1px solid yellow;
    display: inline-block;
    height: 250px;
    }
    #right
    {
    width: 33%;
    float: left;
    border: 1px solid white;
    display: inline-block;
    height: 250px;
    }
    #mid
    {
    width:33%;
    float: left;
    border: 1px solid red;
    display: inline-block;
    height: 250px;
    }
    </style>
    </head>

    <body>
    <div width=100% style="margin: 0 auto;">
        <div id="ldiv"><img src="pixafy.png" style="position: absolute; left: 0px;" /></div>
        <div id="rdiv">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Works</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <div class="clear-both"></div>
        <div id="ctr"></div>
        <div class="clear-both"></div>
        <div id="space"></div>
        <div class="clear-both"></div>
        <div id="container1" style="position: relative;">
            <div id="text1" style="position: absolute; left: 25px; top: 15px;">We are a company of experts developer based in New York City.<br>Partner with us to achieve your business goals through technology.</div>
            <div class="clear-both"></div>
            <div id="text2" style="position: absolute; left: 25px; top: 85px; overflow: auto">Our talented and experienced team has over 10 years of experience developing world-class websites and applications, and we leverage the latest technologies, content management solutions, open source platforms and web standards to solve any challenge.</div>
            <div id="btn" style="position: absolute; right: 45px; top: 100px;"><input type=button class=btnlearn value="Learn More" /></div>
            <div class="clear-both"></div>
            <div id="rcw" style="position: absolute; left: 25px; top: 175px;">Recent Work</div>
            <img src="1.png" style="position: absolute; left: 150px; bottom: 0px;" />
            <img src="2.png" style="position: absolute; left: 400px; bottom: 0px;" />
            <img src="3.png" style="position: absolute; left: 650px; bottom: 0px;" />
        </div>
        <div class="clear-both"></div>
        <div id="container2" style="position: relative;">
            <div id=left stlye="position: absolute;">
                <span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">Website Development</span>
                <div class="clear-both"></div>
                <img src="wd.png" style="position: relative; left: 25px; top: 40px;" />
                <span style="position: relative; width: 25%; top: 40px; left: 80px; color: #ffffff; border: 1px solid green;">Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</span>
            </div>
            <div id=right stlye="position: absolute;">
                <span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">eCommerce Solutions</span>
            </div>
            <div id=mid stlye="position: absolute;">
                <span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 17px; font-weight: bold;">Mobile Phone Applications</span>
            </div>
        </div>
    </div>
    </body>
    </html>

前哨

enter image description here

我想包装它，所以我也可以在接下来的两个DIV中获得类似的内容。 不知道为什么第一行有一个标签并给我这个问题。

有人能告诉我为什么会转到下一个DIV吗？

请帮我解决这个问题。

我想让它看起来像这样：

enter image description here

5 个答案:

答案 0 :(得分：2)

我正在给您一个答案，但要求您了解语义HTML 和 CSS定位。这对你有很大帮助。

现在，就这个例子而言，你过度使用了CSS定位。 KISS原则规定html应该非常简单，易于设计。你的不是语义。我已经使它成为语义，然后添加了正确的样式来模仿你想要的东西。

新屏幕截图：enter image description here

JS小提琴演示：http://jsfiddle.net/q9Rvq/3/

添加了CSS：

#container2 > div h5{
    text-align:center;
    margin:5px 0px;
}

#container2 > div img{
    float:left;
    margin-left:20px;

}

#container2 > div p{
    margin-left:55px;
    margin-right:10px;
    margin-top:0px;
    width:auto;
}

编辑HTML：

<div id="container2" style="position: relative;">
        <div id=left stlye="">
            <h5 style="color: #FFFFFF; font-size: 19px; font-weight: bold;">Website Development</h5>
            <div class="clear-both"></div>
            <img src="wd.png" style="" />
                <p style="color: #ffffff; border: 1px solid green;">Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</p>
            <span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
        </div>
        <div id=right stlye="">
            <h5 style="color: #FFFFFF; font-size: 19px; font-weight: bold;">eCommerce Solutions</h5>
            <div class="clear-both"></div>
            <img src="wd.png" style="" />
            <p style="color: #ffffff; border: 1px solid green;">Our team will collaborate with you to understand your online objectives and goals, using that information to build a secure and reliable web-based storefront.</p>
            <span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
        </div>
        <div id=mid stlye="">
            <h5 style="color: #FFFFFF; font-size: 17px; font-weight: bold;">Mobile Phone Applications</h5>
            <div class="clear-both"></div>
            <img src="wd.png" style="" />
            <p style="color: #ffffff; border: 1px solid green;">Our team specializes in developing mobile applications and websites that deliver on quantity, performance and speed.</p>
            <span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
        </div>
    </div>

答案 1 :(得分：1)

内容溢出，因为元素相对定位。正如有些人评论过的那样，你应该尽量不要使用过多的定位因为它会阻碍你创建回流的布局。您还可以将宽度应用于元素以包装文本。

您显示的图片的HTML应如下所示：

<div>
    <h3>eCommerce Solutions</h3>
    <img alt="" src="">
    <p>Our team will...</p>
    <a href="">Learn More</a>
</div>

Css看起来像这样：

div {
    width: 300px;
    height: 200px;
    background-color: #000;
    color: #fff;
    padding: 20px;
}
div img {
    float: left;
    margin: 0 10px 10px 0;
}
div a {
    float: right;
}

小提琴：http://jsfiddle.net/LM5MZ/3/

答案 2 :(得分：1)

这是你持有正在流血的文本的span标记：

<span style="position:relative;width: 25%; top: 40px; left: 80px; color: #ffffff; border: 1px solid green;">

div，名为#left，具有设置

的样式 
width:33%

所以它是一个固定的宽度。 span范围中的“left：80px”强制文本在固定宽度left div之外。所以，只需向右移动，尝试左：0px而不是。

答案 3 :(得分：1)

在this jsFiddle中（不介意图片损坏...）我只对包含文字的style标记的<span/>属性进行了轻微调整。四溢。我将position: relative; width: 25%; top: 40px;替换为margin: 40px 5px 5px 80px;display: inline-block; display: inline-block告诉浏览器使用框架模型渲染元素，该模型是margin: 40px 5px 5px 80px属性所需要的。这会将内容保留在其包含的父<div/>标记内。

然而，它仍然溢出底部，可能是因为绝对定位。如果您想要滚动它，可以将overflow: auto应用于<div/>，但我认为这不是您想要的样子。

答案 4 :(得分：1)

问题是误导position。在这种情况下，最好使用padding。

这是一些整洁的html使用css，填充和一点浮动：

<强> HTML 

<div id="BoxContainers">
    <div class="boxes left"> 
        <div class="innerBox">
            <div class="title">Website Development</div>

            <img src="wd.png" alt="" /> 
            <div class="content">
                <p>Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</p>
                <a href="" title="">Learn More</a>
            </div>
        </div>
    </div>
    <div class="boxes right">
        <div class="innerBox">
            <div class="title">eCommerce Solutions</div>

            <img src="wd.png" alt="" /> 
            <div class="content">
                <p>Our team will collaborate with you to understand your online objectives and goals, using that information to build a secure and reliable web-based storefront.</p>
                <a href="" title="">Learn More</a>
            </div>
        </div>
    </div>
    <div class="boxes centre">
        <div class="innerBox">
            <div class="title">Mobile Phone Applications</div>

            <img src="wd.png" alt="" /> 
            <div class="content">
                <p>Our team specializes in developing mobile applications and websites that deliver on quantity, performance and speed.</p>
                <a href="" title="">Learn More</a>
            </div>
        </div>
    </div>
</div>

<强> CSS 

#BoxContainers {
    height: 250px;
    border: 1px solid green;
    color: #ffffff;
    background: #000000;
    position: relative;
}

.boxes {
    width: 33%;
    float: left;
    height: 250px;
}
.boxes.left {
    border: 1px solid yellow;
}

.boxes.right {
    border: 1px solid white;
}

.boxes.mid {
    border: 1px solid red;
}

.boxes .innerBox {
    padding: 25px;
}
.boxes .title {
    font-size: 19px; 
    font-weight: bold;
    margin-bottom: 10px;
}
.boxes img {
    float: left;
}
.boxes .content {
    padding-left: 55px;
}
.boxes .content p {
    margin-top: 0;
}

<强> Demo

请注意，没有内联样式。避免使用内联样式，即使是快速模拟某些内容。如果你正确使用css，它会更快地将你的CSS放在样式表中并使用类来重用你的样式。

相关问题
最新问题