如何在其他人之后定位div？

时间：2017-06-21 18:04:50

标签： html css

所以我有多个div。像这样：

<div id="LeftContent"></div>
<div id="RightContent"></div>

等等。我的目标是在所有这些之后创建一个居中的div。当我尝试时，我最终将div放在＆＃39; left＆＃39;之间的空白处。并且＆＃39;对＆＃39; div的。一些CSS代码的答案将非常受欢迎。

HTML5：

  <!doctype html>
<html>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<head>




<meta charset="utf-8">
<title>OneClickLearn</title>
</head>

<body>


<aside>

    <br>
    <nav>
      <ul>
        <li><a href="#nowhere" title="Home">Home</a></li>
        <hr>
        <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Learn HTML</a></li>
        <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Learn CSS</a></li>
        <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Learn the Basics of Web Design</a></li>
        <hr class="nav">
        <li><a href="#nowhere" class="denied" title="Pellentesque fermentum dolor">Learn PHP</a></li>
        <li><a href="#nowhere" class="denied" title="Pellentesque fermentum dolor">Learn JAVASCRIPT</a></li>
      </ul>
    </nav>
  </aside>
  <a id="nav-toggle" href="#" class="position"><span></span></a>
<main>
  <header>
    <div href="#" class="container">
      <h1 class="title">OneClickLearn</h1>
    </div>
  </header>
</main>


<div class="header">
    <div class="content">
        <h1 class="large">Welcome To OneClickLearn</h1>
        <hr class="hr">
        <h2>A website for web developers everywhere</h2>
        </div>
    </div>



<div class="left">
    <h1>What you can do with us</h1>
    <h3>OneClickLearn offers several web design courses, as well as tools like <a href="#">Cascading Style Sheet</a> libraries, and special colors to use for your website! Unlike some other coding websites, OneClickLearn is absolutely free!</h3>
    <a class="abutton"><button>Learn More</button></a>
    </div>

<div>  
<div class="right">
    <h1>CSS Libraries</h1>
    <h3>What's a <a href="#">CSS Library</a>? Simple. This tool is made for web developers who are advanced in website functionality, but maybe not so great in what we would call, 'the pretties'. A CSS library is all the tools in design you need-- waiting for you on the web.</h3>
    <a class="abutton"><button>Learn More</button></a>
    <a class="abutton"><button class="buttonop">Get Ocelot.css</button></a>
</div>

    </div>

<div class="left">
    <h1>Courses</h1>
    <h3>All our courses (so far!) are based off of web design. With these courses, you learn the basics of HTML5, CSS3, and more languages coming soon. Also, you can learn our Cascading Style Sheet libraries' functions. If you have any reccomendations, just email us down below</h3>
    <a class="abutton"><button>Email Us</button></a>
    <a class="abutton"><button class="buttonop">Learn More</button></a>
    </div>


<div class="div">
    <h1>Having trouble with your website?</h1>
    <h3>We'll see what we can do.</h3>
    <a href="mailto:oneclicklearnteam@hmail.com"><button class="abutton">Contact Us</button></a>
    </div>    

</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="js/nav.js"></script>
</html>

CSS：

    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

.div {
        clear: both;
        margin: 0 auto;
        height: 100px;
        width: 600px;
        text-align: center;
    }

    .greyback {
        background-color: #4B4949;
    }

    .nav {
        background-color: #bdc3c7;
    }

    .denied {
        color: #bdc3c7;
    }

    .denied:hover {
        cursor: not-allowed;
    }

    body {
        size: 100%;
        display: cover;
        margin: 0;
        padding: 0;
    }

    p a {
        color: #27ae60;
        text-decoration: none;
    }

    p a:hover {
        color: #27ae60;
        text-decoration: underline;
        cursor: pointer;
    }

    .header {
        color: white;
        width: 100%;
        height: 300px;
        background-color: #2980b9;
    }

    .content {
        margin-top: 70px;
        padding-top: 60px;
        text-align: center;
    }

    .large {
        font-size: 40px;
    }

    .hr {
        width: 100px;
    }

    .left {
        margin: 20px;
        float: left;
        height: auto;
        width: 50%;
        color: #4B4949;
    }

    .right {
        margin: 20px;
        float: right;
        height: auto;
        width: 50%;
        color: #4B4949;
    }

    a {
        color: #2AABAD;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    .side {
        margin: 20px;
    }

    .img {
        display: inline-block;
    }

    button {
        background-color: #2980b9;
        border: none;
        border-radius: 5PX;
        height: 40px;
        width: auto;
        color: white;
    }

    button:hover {
        background-color: #3498db;
        cursor: pointer;
    }

    .abutton {
        color: none;
        text-decoration: none;
    }

    .buttonop {
        background-color: #3498db;
        border: none;
        border-radius: 5PX;
        height: 40px;
        width: auto;
        color: white;
    }

    .buttonop:hover {
        background-color: #2980b9;
        cursor: pointer;
    }

    .main {
        width: 100%;
        text-align: center;
    }

    .main-content {
        display: inline-block;
    }

P.S。我正在使用float：left;和浮动：对;对于左右div：）

谢谢:)（如果我需要任何详细说明，请告诉我）

3 个答案:

答案 0 :(得分：2)

我不是100％清楚你在问什么，但你可以尝试以下内容：

<强> HTML 

(*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-1-17, 1.40 PM.xcarchive, ::, 1*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-1-17, 10.48 AM.xcarchive, ::, 2*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-1-17, 11.04 AM.xcarchive, ::, 3*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-1-17, 11.24 AM.xcarchive, ::, 4*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-1-17, 9.37 AM.xcarchive, ::, 5*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-3-17, 2.01 PM.xcarchive, ::, 6*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-3-17, 2.02 PM.xcarchive, ::, 7*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-5-17, 2.51 PM.xcarchive, ::, 8*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-12-17, 8.49 AM.xcarchive, ::, 9*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-12-17, 8.53 AM.xcarchive, ::, 10*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 5-16-17, 11.43 AM.xcarchive, ::, 11*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 6-5-17, 1.42 PM.xcarchive, ::, 12*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 6-6-17, 10.37 AM.xcarchive, ::, 13*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 6-6-17, 4.09 PM.xcarchive, ::, 14*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 6-13-17, 4.01 PM.xcarchive, ::, 15*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 6-14-17, 11.36 AM.xcarchive, ::, 16*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 6-14-17, 8.00 AM.xcarchive, ::, 17*)
    (*focus 6-14-17, 8.03 AM.xcarchive, ::, focus 6-14-17, 8.03 AM.xcarchive, ::, 18*)

<强> CSS 

<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="CentredDiv"></div>

答案 1 :(得分：1)

是的，不完全确定你想要什么，但也许像this？

#CenteredContent {
  clear: both;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}

答案 2 :(得分：0)

我从你的问题中理解的是你需要一个居中的div。你可以这样做来实现居中的div。

<强> HTML： 

<div class="centered-div">
  Some Content
</div>

<强> CSS： 

.centered-div {
  width: 400px;
  min-height: 400px;
  margin: 0 auto;
  clear: both;
}

我希望有帮助：）

相关问题
最新问题