CSS의 두 상자 사이의 여백

Question

먼저 프론트 엔드 개발에 초보자입니다. 나는 전문가들로부터 내 문제의 가능한 "전문적인"해결책을 듣고 싶다. http://jsfiddle.net/SB7yR/ 여기

내가 원하는 무엇인가 :

지금, 먼저이 바이올린을 확인 각 행에 두 개의 상자를 만들 수 있습니다. 두 상자 사이에 여백을두고 싶기 때문에 여기서 바로 할 수는 없습니다.

나는 그 상황에 대한 해결책을 가지고있다. 예를 들어 "last"와 같은 클래스를 만들고, 그것을 margin-right: 0;에주고 각 행에 마지막 상자를 적용한다. 그러나 나는 그것을하고 싶지 않다. 그것은 소리가 .. 흠 .. 아마추어 솔루션.

조언 해 주셔서 감사합니다.

Answer 1

당신은 text-align: justify;.addresses에 추가 할 수 있으며 address_box에 margin-right를 제거 다음으로 .addresses #address-box 정의를 교체하십시오.

.addresses { 
    margin-top: 30px; 
    text-align: justify; 
} 

또한, 당신은 대신 ID의 .addresses #address-box을위한 클래스를 사용해야합니다. ID는 페이지에서 고유해야하기 때문에 하나의 요소 만 특정 ID를 가질 수 있습니다. 대신 .addresses .address-box을 사용하십시오.

Answer 2

이 작업을하려면 플로트를 사용해야합니다.

.addresses #address-box { 
    height: 123px; 
    width: 288px; 
    border-color: black; 
    border-style: solid; 
    border-width: 1px; 
    display: inline-block; 
    margin: 10px; 
    overflow: hidden; 
    float: left; 
    } 

Answer 3

제 제안은 모든 상자에 대해 클래스를 만드는 것입니다 (각 상자가 같은 크기라고 가정). 그러면 모든 상자가 왼쪽으로 떠있게됩니다. 그런 다음 너비를 실제 실제 크기 또는 백분율로 포함 된 div의 너비보다 작게 만듭니다. 이렇게하면 각 행에 두 개의 상자가 있습니다. 희망이 도움이됩니다.

.box{ float:left; width:48%; margin-right:5px; } 

그런 것. 한계 금액을 시험해보십시오. 코드 아래

Answer 4

시도 : - 크로스 브라우저 호환성에 대한

.addresses #address-box { 
    height: 123px; 
    width: 298px; 
    border-color: black; 
    border-style: solid; 
    border-width: 1px; 
    float:left; 
    margin-right: 20px; 
    } 
#address-box:nth-child(2n) { 
    margin-right:0; 
    } 

Answer 5

, 어떻게 추가 HTML 요소에 대한 :

http://jsfiddle.net/SB7yR/8/

HTML :

<div id="addresses-wrap"> 
    <div class="addresses"> 
     <div class="overflow"> 
      <div id="address-box"></div> 
      <div id="address-box"></div> 
      <div id="address-box"></div> 
      <div id="address-box"></div> 
      <div id="address-box"></div> 
     </div> 
    </div> 
</div> 

CSS :

#addresses-wrap { 
    width: 620px; 
    height: auto; 
    border:1px solid green; 
    overflow:hidden; 
} 
.addresses { 
    width:100%; 
    float:left; 
    margin-top: 30px; 
} 
.addresses .overflow { 
    width:650px; 
    overflow:hidden; 
} 
.addresses #address-box { 
    height: 123px; 
    width: 298px; 
    border:1px solid #000; 
    float:left; 
    margin:0 20px 20px 0; 
}