Question

这是定位问题吗？ https://jsfiddle.net/zhuc6ma0/

.container-01 {
position: absolute;
float: left;
margin: 20px 40px;
width: 380px;
height: 160px;
border-left: 2px solid black;    
opacity: .5;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle,white, grey, black); /* Safari */
  background: -o-radial-gradient(circle,  white, grey, black); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  white, grey, black); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  white, grey, black); /* Standard syntax */
z-index: 5;
}

.container-01-box {
    float: left;
margin: 40px 40px;
width: 380px;
height: 10px;
opacity: .5;
z-index: 50;
border: 1px solid black;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */
  background: -o-radial-gradient(circle,  black, grey, white); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  black, grey, white); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  black, grey, white); /* Standard syntax */
}

#trident-left {
float: left;
top: 0;
left: 0;
z-index: 100;
}


/* -----------------RIGHT CONTAINER TOP (NIGHTMARE)

*/

.container-02 {
    position: relative;
float: right;
margin: 20px 40px;
width: 380px;
height: 160px;
border-right: 2px solid black;    
opacity: .5;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, white, grey, black); /* Safari */
  background: -o-radial-gradient(circle,  white, grey, black); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  white, grey, black); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  white, grey, black); /* Standard syntax */
z-index: 5;
}

.container-02-box {

clear: both;
display: inline-block;
float: right;
margin: 40px 40px;
width: 380px;
height: 10px;
opacity: .5;
z-index: 50;
border: 1px solid black;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */
  background: -o-radial-gradient(circle,  black, grey, white); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  black, grey, white); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  black, grey, white); /* Standard syntax */
}


#trident-right {
float: right;
top: 0;
left: 0;

<h1 id="name-of-dream">"The ships from Nova"</h1>
<div class="container-01"><img src="images/triangle-01.png" id="trident-left">
</div>
<div class="container-01-box">
</div>
    
<div class="container-02"><img src="images/triangle-01.png" id="trident-right">
</div>
<div class="container-02-box">
</div>

这是我的问题，我想在右侧框中看起来与右边的框相同。随着酒吧在盒子上。但它并不存在。

Answer 1

如果你将div放在另一个div中更好：

<h1 id="name-of-dream">"The ships from Nova"</h1>
<div class="container-01">
  <img src="images/triangle-01.png" id="trident-left">

  <div class="container-01-box">
  </div>
</div>

<div class="container-02">
  <img src="images/triangle-01.png" id="trident-right">

  <div class="container-02-box">
  </div>
</div>

CSS：

.container-01 {
position: relative;
float: left;
margin: 20px 40px;
width: 40%;
height: 160px;
border-left: 2px solid black;    
opacity: .5;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle,white, grey, black); /* Safari */
  background: -o-radial-gradient(circle,  white, grey, black); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  white, grey, black); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  white, grey, black); /* Standard syntax */
z-index: 5;
}



.container-01-box {
    float: left;
/* margin: 40px 40px; */
width: 100%;
height: 10px;
opacity: .5;
z-index: 50;
border: 1px solid black;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */
  background: -o-radial-gradient(circle,  black, grey, white); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  black, grey, white); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  black, grey, white); /* Standard syntax */
}

#trident-left {
float: left;
top: 0;
left: 0;
z-index: 100;
}


/* -----------------RIGHT CONTAINER TOP (NIGHTMARE)

*/

.container-02 {
    position: relative;
float: right;
margin: 20px 40px;
width: 40%;
height: 160px;
border-right: 2px solid black;    
opacity: .5;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, white, grey, black); /* Safari */
  background: -o-radial-gradient(circle,  white, grey, black); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  white, grey, black); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  white, grey, black); /* Standard syntax */
z-index: 5;
}

.container-02-box {

clear: both;
display: inline-block;
float: right;
/* margin: 40px 40px; */
width: 100%;
height: 10px;
opacity: .5;
z-index: 50;
border: 1px solid black;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */
  background: -o-radial-gradient(circle,  black, grey, white); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  black, grey, white); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  black, grey, white); /* Standard syntax */
}


#trident-right {
float: right;
top: 0;
left: 0;
z-index: 100;
}

如何将两列彼此对齐

1 个答案: