Question

我是新手，但我真的需要一些帮助，因为我需要在很短的时间内完成这个项目，并希望你们能帮助我：）

我有一个我有音乐活动的网页。我喜欢4个小文本块和1个大文本块。我想把大文本块放在大文本的中间和左边2和大文本的右边2。现在我尝试了浮动和定位的所有东西但是没有用，因为页面仍然需要响应并且固定位置它不会。

这里我将包含网页截图和我的代码：

截图： https://www.dropbox.com/s/bypclcbyhh6t7eg/Website%20screenshot.png?dl=0

HTML Code:
<!DOCTYPE html>
<html lang="en">

<head>
<title>FREN, A Mind Blowing Journey Into Sound!</title>
<meta charset="utf-8" />

<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

<body class="body">

<!--Header image-->
<header class="mainheader">
    <img src="img/header.png" alt="FREN"/>

<!--Navigatie-->        
    <nav><ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Pics</a></li>
        <li><a href="#">Tickets</a></li>
        <li><a href="#">Contact</a></li>
    </ul></nav>
</header>

<div class="mainContent">
    <div class="content">

<!--Bovenste blok met tekst-->      
        <article class="topcontent">

<!--Titel van het artikel-->                
            <header>
                <h2>FREN</h2>
            </header>

<!--Footer van je artikel (dingen zoals naam, datum etc.-->             
                <footer>
                    <p class="post-info">Dit bericht is geschreven door Davey de Loos</p>
                </footer>

<!--Voeg tekst toe in het linker vak met tekst.-->              
                <div class ="tekst">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue eget felis sed finibus. Integer aliquam aliquet tempor. Curabitur aliquam nunc mauris, at aliquet ante euismod quis. Nulla eget auctor enim, sit amet imperdiet nisl. Nulla lacinia arcu eu condimentum interdum. Mauris tincidunt dictum lacinia. Praesent facilisis et odio sit amet pellentesque. Praesent hendrerit sapien diam, sed pharetra lorem luctus vitae. Maecenas dignissim consectetur eros, eget lacinia purus. Sed sit amet congue urna, finibus interdum leo. Curabitur volutpat diam ut auctor consectetur. Praesent varius neque varius tellus pretium, ac malesuada urna dapibus. Sed ac accumsan lorem, sit amet molestie neque. Vestibulum metus diam, convallis et ornare sed, eleifend ut lacus. Praesent scelerisque, nibh et aliquet placerat, risus lorem tristique odio, id pulvinar massa lectus nec sapien.</p>
            </div>

        </article>

    </div>

<!--Blok linksboven-->
<aside class="top-left-sidebar">
    <article>
        <h2>Top left sidebar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue eget felis sed 
finibus.</p>
    </article>
</aside>

<!--Blok rechtsboven-->
<aside class="top-right-sidebar">
    <article>
        <h2>Top right sidebar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue eget felis sed 
finibus.</p>
    </article>
</aside>

<!--Blok linksonder-->
<aside class="bot-left-sidebar">
    <article>
        <h2>Bottom left sidebar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue eget felis sed 
finibus.</p>
    </article>
</aside>

<!--Blok rechtsonder-->
<aside class="bot-right-sidebar">
    <article>
        <h2>Bottom right sidebar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue eget felis sed        
 finibus.</p>
    </article>
</aside>

</div>


<!--Footer-->
<footer class="mainFooter">
<p>Copyright &copy;2015 Kids With Mad Habits</p>
</footer>

</body>
</html>

这是CSS文件：

/*Opmaak body */
body {
    background-color: white;
    color: #000305;
    font-size: 87.5%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: #4B0082;
}

a:hover, a:active {
    background-color:#4B0082;
    color: #FFF;
}

.body {
    margin: 0 auto;
    width: 90%;
    clear: both;
}

.mainheader img {
    width: 100%;
    height: auto;
    margin: 0.5% auto;
}

.mainheader nav {
    background-color: #666;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader nav ul {
    list-style: none;
    margin: 0 auto;
}

.mainheader nav ul li {
    float: left;
    display: inline;
}

.mainheader nav a:link, .mainheader nav a:visited {
    color: #FFF;
    display: inline-block;
    padding: 10px 30px;
    height: 20px;
}

.mainheader nav a:hover, .mainheader a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
    background-color: #4B0082;
    text-shadow: none;
}

.mainContent {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
}

.content {
    width: 40%;
    float: left;
}

.topcontent {
    background-color: #d3d3d3;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2px;
    float: middle;
}

.top-left-sidebar {
    background-color: #d3d3d3;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 23.5%;
    float: left;
    padding: 2% 3%;
    margin: 2px 0 0.5% 0.5%;
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 90%;
}

.top-right-sidebar {
    background-color: #d3d3d3;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 23.5%;
    float: left;
    padding: 2% 3%;
    margin: 2px 0 0.5% 0.5%;
}

.bot-right-sidebar {
    background-color: #d3d3d3;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 23.5%;
    float: left;
    padding: 2% 3%;
    margin: 0 0 0.5% 0.5%;
}

.bot-left-sidebar {
    background-color: #d3d3d3;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 23.5%;
    float: left;
    padding: 2% 3%;
    margin: 0 0 0.5% 0.5%;
}

.mainFooter {
    width: 100%;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #666;
    margin-top: 2px;
    margin-bottom: 2%;
}

.mainFooter p {
    width: 92%;
    margin: 0.5% auto;
    color: #FFF;
}

定位盒，尝试了一切，但它没有工作

0 个答案: