Question

我试图用我的基本知识为我的母亲建立一个网站。但是我尝试了很多东西，但是我无法按照我想要的方式工作

现在的样子如下：

这就是我想要的方式：

但不知怎的，我无法让它发挥作用。 div不是我希望它定位的位置。

这是我的源代码： JsFiddle

关于这部分没有正确定位的部分：

 <div class="wrapper_3">
    <div class="main_3">
        3
    </div>
 </div>

提前感谢您的帮助！我真的无法让它发挥作用。

Answer 1

将float:left;添加到wrapper_1和wrapper_2

之后，使用position:relative;定位wrapper_2。

如果您需要有关语法的更多信息，请访问此链接。 CSS Position Property 这是你的新CSS。

.wrapper_1 {    width: 25%;
  display: inline-block;
  position: relative;
  margin-left: 21%;
  margin-top: 14%;
  clear: both;
    float:left;}


 .wrapper_2 {
      width: 25%;

      display: inline-block;
      position: absolute;
      margin-left: 16px;
      margin-top: 5%;
        float:left;
        position: relative;
        top: 50%;

    }

Answer 2

如果你的网站使用bootstrap会更容易。

HTML：

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <div class="logo text-center">logo</div>
        </div>
        <div class="col-xs-offset-4 col-xs-3 box">2</div>
            <div class="col-xs-offset-4 col-xs-3 box">1</div>
    </div>

</div>

的CSS：

.logo {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 15px;

}
.box {
    padding: 60px;
    background-color: red;
    margin-top: 30px;
}

http://jsfiddle.net/souraj/sxuqqqgd/

在这里你可以看到代码。你必须链接bootstrap.css文件才能工作。只需访问getbootstrap.com，看看如何在您的代码中链接bootstrap.css。将此代码添加到代码的头部。 enter link description here

Answer 3

在这里你去:)我编辑你的小提琴，你为什么使用position：absolute;到处？您的设计不需要绝对定位。

* { 
  padding: 0; 
  margin: 0; 
}

html, body {
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  width: 100%;
  height: 100%;
}

.wrapper_logo {
  margin-top: 10px;
  margin-left: 10px;
  width:20%;
  display: inline-block;
  position: absolute;
}

.wrapper_logo:after {
  padding-top: 45%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_logo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 10px;
    padding-left: 20px;
    font-size: 30px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    color: black;
    vertical-align: middle;
}

.wrapper_1 {
  width: 25%;
  display: inline-block;
  position: relative;
  margin-left: 21%;
  margin-top: 14%;
  clear: both;
}

.wrapper_1:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
  clear: both;
}

.main_1 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.wrapper_2 {
  width: 25%;
  margin-left:200px;
}

.wrapper_2:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_2 {

  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.wrapper_3 {
  width: 15%;
  float: left;
  display: inline-block;
  position: absolute;
}

.wrapper_3:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.three {
  position: absolute; 
  background: green; 
  width: 400px; 
  top: 10px; 
  left: 50px;
}

<!DOCTYPE html>
		<div class="main">
    
		    <div class="wrapper_logo">
				<div class="main_logo">
					LOGO
				</div>
			</div>

        	<div class="wrapper_1">
				<div class="main_1">
					1
    			</div>
			</div>

			<div class="wrapper_2">
				<div class="main_2">
					2
    			</div>
			</div>

			<!-- <div class="wrapper_3">
				<div class="main_3">
					3
    			</div>
			</div> -->
		</div>

不能将div放在另一个div之下

3 个答案: