Question

我有一个主容器，里面有三个主要的div部分，其中两个是向右浮动，它是“info”和“trainings”div，在左边我有一个叫做news的“主要”。 / p>

问题是，在我的训练div的左边，它留下了一个很大的空间，我不知道为什么......如果你们可以看看它，看看你是否发现问题，那将是非常棒的。

我现在正在使用wamp服务器，所以你们可以在网上查看它，其地址是http://simpolarna.sytes.net/

CSS：

 /*The content of the site*/
.container {
    border: 1px solid #000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    width: 92%;
    margin: auto;
    margin-bottom: 12px;
    display: table;
}

.container > .news, .container > .training, .container > .info {
    padding: 10px;
}

.container table td {
    padding: 0 5px 0 5px;
    text-align: left;
}

/*The news feed*/
.news {
    display: inline-block;
    float: left;
    width: 60%;
}

.news > table{
    border: 1px solid #000;
    text-align: center;
    background: rgba(209, 209, 209, 0.6);
    background: linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    background: -o-linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    background: -moz-linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    background: -webkit-linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    width: 100%;
}

/*Todays training*/
.training {
    display: inline-block;
    float: right;
    width: 25%;
}

.training > table {
    border: 1px solid #000;
    background: rgba(209, 209, 209, 0.6);
    background: linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    background: -o-linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    background: -moz-linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    background: -webkit-linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    width: 100%;
}

/*The information box*/
.info {
    display: inline-block;
    float: right;
    width: 35%;
    content: "";
    clear: right;
}

.info > table {
    border: 1px solid #000;
    background: rgba(209, 209, 209, 0.6);
    background: linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    background: -o-linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    background: -moz-linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    background: -webkit-linear-gradient(top, rgba(209, 209, 209, 0.33) 5%);
    width: 100%;
}

HTML：

<section class="container">
    <div class="training">
        <table border="1">
            <tr>
                <th><?=$weekday?></th>
            </tr>
            <tr>
                <td><?=$times?></td>
            </tr>
        </table>
    </div>
    <div class="info">
        <table border="1">
            <tr>
                <th>Information V.<?=Date('W');?></th>
            </tr>
            <tr>
                <td>Nu är den gamla tråkiga hemsidan borta och en    ny samt lättanvändlig sida har 
                    kommit fram, f.o.m nu stängs Lagsidan ner för gått och denna nya sida ska stiga!
                    Nu är den gamla tråkiga hemsidan borta och en ny samt lättanvändlig sida har 
                    kommit fram, f.o.m nu stängs Lagsidan ner för gått och denna nya sida ska stiga!<br/><br/>
                    Nu är den gamla tråkiga hemsidan borta och en ny samt lättanvändlig sida har
                    kommit fram, f.o.m nu stängs Lagsidan ner för gått och denna nya sida ska stiga!</td>
            </tr>
        </table>
    </div>

    <div class="news">
        <table border="1">
            <tr>
                <th><h3>Nu ska allt gammalt kastas ut!</h3><img src="images/105.gif" alt=""/></th>
            </tr>
            <tr>
                <td>
                    <p>Nu är den gamla tråkiga hemsidan borta och en ny samt lättanvändlig sida har 
                    kommit fram, f.o.m nu stängs Lagsidan ner för gått och denna nya sida ska stiga!</p>
                </td>
            </tr>
        </table>
    </div>

    <div class="news">
        <table border="1">
            <tr>
                <th><h3>Nu ska allt gammalt kastas ut!</h3><img src="images/123.gif" alt=""/></th>
            </tr>
            <tr>
                <td>
                    <p>Nu är den gamla tråkiga hemsidan borta och en ny samt lättanvändlig sida har 
                    kommit fram, f.o.m nu stängs Lagsidan ner för gått och denna nya sida ska stiga!</p>
                </td>
            </tr>
        </table>
    </div>

    <div class="news">
        <table border="1">
            <tr>
                <th><h3>Nu ska allt gammalt kastas ut!</h3><img src="images/112.gif" alt=""/></th>
            </tr>
            <tr>
                <td>
                    <p>Nu är den gamla tråkiga hemsidan borta och en ny samt lättanvändlig sida har 
                    kommit fram, f.o.m nu stängs Lagsidan ner för gått och denna nya sida ska stiga!
                    <img src="images/113.gif" alt=""/></p>
                </td>
            </tr>
        </table>
    </div>
</section>

放入的文字只是展开并填写div现在。

Answer 1

删除浮动表单新闻类

的CSS：

.news {
display: inline-block;
width: 60%;
}

Answer 2

最快的解决办法是将第一个.news div移到顶部。

更好的解决方法是将新闻div放在一个容器div中，该容器div浮动到左侧，并将training和info div放在另一个div中，该div浮动到右侧。

三个div漂浮在一个容器内，留下了一个很大的空间

2 个答案: