Question

我似乎无法获得第三个＆＃34; promobox＆＃34;与其他两个一起来到第一行，它只是进入下一行，但它被设置为一个百分比，所以它不重要。我试图用另一个论坛的答案解决这个问题，但我根本无法做到。帮助会很棒。谢谢你。

<html>
<head>
    <style>
* {
    margin: 0px; padding: 0px; border: 0px;
    }

#container {
    width: 100%; height: 500px;
    max-width: 1440px; min-width: 1024px;
    margin: 0px auto;
    border: 2px solid blue;
    text-align: center;
    }

.bigbox {
    height: 530px;
    background-image: url(images/photos/landscape-1440.jpg);
    background-position: 50% 50%;
    border: 2px solid red;
    }

.promobox {
    width: 25%;
    height: 200px;
    display: inline-block;
    background-position: 50% 0%;
    border: 2px solid green;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    }

.promobox div {
    height: 200px;
    border-color: #FFF;
    border-style: none;
    }


div {
    text-align: center;
    position: relative;
    }

div a {
    position: absolute;
    bottom: 10px; right: 10px;
    color: #FFF;
    text-shadow: 1px 1px 1px #000;
    }

#pb1 {width: 25%;} 


#pb2 {width: 50%;}

#pb3 {width: 25%}




</style>
</head>
<body bgcolor="white">

    <div id="container">
<div class="bigbox">

<div class="promobox" id="pb1">#</div>
<div class="promobox" id="pb2">#</div>
<div class="promobox" id="pb3">#</div></div></div></body></html>

Answer 1

你没有考虑div的边界，因此你将超过100％的宽度。最简单的解决方案是移除边框或总宽度小于或等于98％

e.g。

#pb1 {width: 24%;} 
#pb2 {width: 50%;}
#pb3 {width: 24%}

Answer 2

你有两个的东西可能会使3个盒子彼此相邻排列。给定的border:2px solid green;和display: inline-block;

使用边框时，你不能让盒子总共有100％。因为边框需要是100％的一部分。

.promobox {
    width: 25%;
    height: 200px;
    float:left;         /*Change the display:inline-block to this */
    background-position: 50% 0%;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    }

工作 DEMO （没有边框）

Answer 3

最后我回答了我的评论： DEMO以及下面的修复

在你的HTML中，div之间有空格，一旦white-space你的div为display，它就会生成inline-block。

25％+ 50％+ 25％+ 2 white-space + borders超过100％。

边框可以使用box-sizing和white-space从HTML中删除或通过CSS设置font-size删除为0并返回16px左右{{1 }}

更新CSS：

.promobox

Answer 4

试试这个：

<html>
<head>
    <style>
* {
    margin: 0px; padding: 0px; border: 0px;
    }

#container {
    width: 100%; height: 500px;
    max-width: 1440px; min-width: 1024px;
    margin: 0px auto;
    text-align: center;
    }

.bigbox {
    height: 530px;
    background-image: url(images/photos/landscape-1440.jpg);
    background-position: 50% 50%;
    }

.promobox {
    width: 25%;
    height: 200px;
    display: inline-block;
    background-position: 50% 0%;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    float:left;
    }

.promobox div {
    height: 200px;
    border-color: #FFF;
    border-style: none;
    }


div {
    text-align: center;
    position: relative;
    }

div a {
    position: absolute;
    bottom: 10px; right: 10px;
    color: #FFF;
    text-shadow: 1px 1px 1px #000;
    }

#pb1 {width: 25%;} 


#pb2 {width: 50%;}

#pb3 {width: 25%}




</style>
</head>
<body bgcolor="white">

    <div id="container">
<div class="bigbox">

<div style='background:red' class="promobox" id="pb1">#</div>
<div style='background:green' class="promobox" id="pb2">#</div>
<div style='background:yellow' class="promobox" id="pb3">#</div></div></div></body></html>

Answer 5

这是一个连续两个div的工作演示

<div style="text-align:center;">
<div style="border:1px solid #000; display:inline-block;">Div 1</div>
<div style="border:1px solid red; display:inline-block;">Div 2</div>

Demo

如何在一行中获得三个DIV元素？

5 个答案: