Question

我在构建一个简单的网站时遇到了问题。

我想用作新闻的容器（包装纸宽度的70％），并且作为我最喜欢的新闻，它应位于右侧。

我有显示块并向左浮动，同时显示内联。

没关系，但是旁边的内容并不像预期的那样。如果我把它放进去，它有包装纸的宽度，而不是放在一边。

我该怎么办？当我尝试将填充添加到我的旁边列表中时，我不能。

#aside {
    padding-left: 2em;
    width: 29%;
    display: inline;
    margin: 0;
    background-color: green;
}

Answer 1

您只需使用两个div元素即可将页面划分为70％和30％。我已经编辑了一些你的 CSS ，它可以工作：

<强> CSS：

.sec
{
width:70%;
float:left;
background-color: red;  
margin-bottom: 3em;
}
.side
{
width:30%;
float:left;
background-color:Green;
}

<强> HTML：

<div id="wrapper">
//your rest of HTML

<div class="sec">
                            <h1>Last news</h1>
                            <article>
                                    <h1>News #1</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.</p>
                            </article>
                            <footer>
                                    <ul>
                                            <li>Author: admin</li>
                                            <li>date: 31.12.2003</li>
                                    </ul>
                            </footer> <!-- date and author #1 -->
                            <!-- news1 -->

                            <article>
                                    <h1>News #2</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.</p>
                            </article>
                            <footer>
                                    <ul>
                                            <li>Author: admin</li>
                                            <li>date: 31.12.2003</li>
                                    </ul>
                            </footer>  <!-- date and author #2 -->
                            <!-- news2 -->

                            <article>
                                    <h1>News #3</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.</p>
                            </article>
                            <footer>
                                    <ul>
                                            <li>Author: admin</li>
                                            <li>date: 31.12.2003</li>
                                    </ul>
                            </footer>  <!-- date and author #3 -->
                            <!-- news3 -->

                    </div>
                    <div class="side">
                            <h2>Most popular articles</h2>
                            <ul>
                                    <li>Example article #1</li>
                                    <li>Example article #2</li>
                                    <li>Example article #3</li>
                                    <li>Example article #4</li>
                                    <li>Example article #5</li>
                                    <li>Example article #6</li>
                                    <li>Example article #7</li>
                                    <li>Example article #8</li>
                                    <li>Example article #9</li>
                                    <li>Example article #10</li>
                            </ul>
                    </div>
//your footer code here...
</div>

DEMO

定位部分和div

1 个答案: