Question

我有“左侧广告” div和“右侧广告” div，主要内容和菜单位于中间。我想将“左广告” div向左移动，以便“菜单栏”及其下面的所有内容都位于顶部。我想将“正确的广告” div向右移动。同样，在移动它们后，它们应该独立，即它们的内容是什么，它们都不应影响中间div（即主要内容div）。[请在桌面上全屏查看]

*{
    margin: 0;
    padding: 0;
}

#adleft{
    background: pink;
}

#wrapper{
    max-width: 1024px;
    margin: 0 auto;
}

#topmenubar{
    background:violet;
}

#logoandad{
    background:greenyellow;
}

#main_content{
    background: azure;
    border: 1px solid black;
}

#featuredcontent{
    background: burlywood;
}

#morecontents{
    background: crimson;
}

#allquizes{
    background: chocolate;
}

#adright{
    background: aqua;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style/quiz.css">
    <title>QuizOm</title>
</head>
<body>
<div class="adscontainers" id="adleft">Left Ads</div>
<div id="wrapper">
<div id="topmenubar">Menu Bar</div>
<div id="logoandad">Logo and Ads</div>
<div id="main_content">
    <div id="featuredcontent">
        <div class="twoupperbox">Featured content 1</div>
        <div class="twoupperbox">Featured content 2</div>
    </div>
    <div id="morecontents">
        <div class="bottomthreebox">conten1</div>
        <div class="bottomthreebox">conten2</div>
        <div class="bottomthreebox">conten3</div>
    </div>

    <div id="allquizes">
        <h1>All Quizes</h1>
        <div class="bottomthreebox">All quiz1</div>
        <div class="bottomthreebox">All quiz2</div>
        <div class="bottomthreebox">All quiz3</div>
    </div>
</div>
</div>
<div class="adscontainers" id="adright">Right Ads</div>
</body>
</html>

Answer 1

最简单的方法是使用display:flex

#adleft{
    background: pink;
}

#wrapper{
    max-width: 1024px;
    margin: 0 auto;
    flex:1 0 auto;
}

#topmenubar{
    background:violet;
}

#logoandad{
    background:greenyellow;
}

#main_content{
    background: azure;
    border: 1px solid black;
}

#featuredcontent{
    background: burlywood;
}

#morecontents{
    background: crimson;
}

#allquizes{
    background: chocolate;
}

#adright{
    background: aqua;
}

.container{
  display: flex;
  flex-direction: row;
  
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style/quiz.css">
    <title>QuizOm</title>
</head>
<body>
<div class="container">


<div class="adscontainers" id="adleft">Left Ads</div>
<div id="wrapper">
<div id="topmenubar">Menu Bar</div>
<div id="logoandad">Logo and Ads</div>
<div id="main_content">
    <div id="featuredcontent">
        <div class="twoupperbox">Featured content 1</div>
        <div class="twoupperbox">Featured content 2</div>
    </div>
    <div id="morecontents">
        <div class="bottomthreebox">conten1</div>
        <div class="bottomthreebox">conten2</div>
        <div class="bottomthreebox">conten3</div>
    </div>

    <div id="allquizes">
        <h1>All Quizes</h1>
        <div class="bottomthreebox">All quiz1</div>
        <div class="bottomthreebox">All quiz2</div>
        <div class="bottomthreebox">All quiz3</div>
    </div>
</div>
</div>
<div class="adscontainers" id="adright">Right Ads</div>

</div>

</body>
</html>

CSS在左右移动div

1 个答案: