내가 지금까지 가지고 무엇

Question

: http://jsfiddle.net/cHKF4/3/

하지만

#late { 
    position: relative; 
    border-style: solid; 
    border-width: 3px; 
    border-color: #00fff3; 
    height: 200px; 
     width: 960px; 
    margin: 0 auto; 
    margin-top: 30px; 
} 

#box1 { 
    position: relative; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #55fff3; 
    height: 100%; 
    width: 200px; 
    margin: 0 auto; 
} 

#box2 { 
    position: relative; 
    border-style: solid; 
    border-width: 3px; 
    border-color: #55fff3; 
    height: 100%; 
    width: 200px; 
} 

감사합니다 작은 상자를 (BOX1를 내부 늦게 BOX2) 넣을 .

Answer 1

Is this what you're trying to achieve (box1와 나란히 box2 측과 late와 late 내부를 중심으로 페이지를 중심으로) :

<div id="late"> 
    <div id="inner"> 
     <div id="box1"></div> 
     <div id="box2"></div> 
    </div> 
</div>​ 

#late { 
    border: solid 3px #00fff3; 
    height: 200px; 
    width: 960px; 
    margin: 30px auto 0 auto; 
} 

#inner { 
    width: 408px; 
    height: 100%; 
    margin: 0 auto 0 auto; 
} 

#box1 { 
    border: solid 1px #55fff3; 
    height: 100%; 
    width: 200px; 
    float: left; 
} 

#box2 { 
    border: solid 3px #55fff3; 
    height: 100%; 
    width: 200px; 
    float: left; 
} 
​ 

Answer 2

나는 당신이 달성하려는 것을 이해하지 못합니다. #late 안에 # box1 및 # box2를 가운데에 놓으려고합니까? 그냥 #late 내부에 나란히 그들에게 측면을 넣어하려는 경우

이 내가 어떻게 할 것입니다 : http://codepen.io/AntonNiklasson/pen/rIdcj

Answer 3

시도 모두 #box1 및 #box2

#box1 { 
    float:left; 
    position: relative; 
    border-style: solid; 
    border-width: 3px; 
    border-color: #55fff3; 
    height: 100%; 
    width: 200px; 
} 

#box2 { 
    float:left; 
    position: relative; 
    border-style: solid; 
    border-width: 3px; 
    border-color: #55fff3; 
    height: 100%; 
    width: 200px; 
} 

Answer 4

에 float:left 추가

#box1 { 
position: absolute; 
top: 10px; 
left: 10px; 
} 

상위 컨테이너의 위치를 ​​relative로 설정합니다.