둥근 모서리 상자를 옆에 정렬

두 개의 둥근 모서리 상자를 옆에 정렬하고 싶습니다. 그러나 두 번째 상자는 플로트를 사용하여 나에게 가장 먼저 맞는 부분 바로 아래에 나타납니다. 첫 번째. 이 문제를 해결할 수있는 방법은 정말 도움이 될 것입니다. 아래는 html과 css입니다.둥근 모서리 상자를 옆에 정렬

html로 :

<html> 
    <head> 
     <title>Homepage</title> 
     <link rel="stylesheet" href="layout.css"/> 
    </head> 

    <body> 

     <div id="containerDiv"> 

        <!-- Box 1 --> 

      <div id="box1" class="boxDiv"> 
       <div class="upperRound"></div> 
       <div class="boxTagLine"> 
         Some Tag Line 
       </div> 
       <div class="boxContent"> 
        Heres some content 
       </div> 
       <div class="lowerRound"></div> 
      </div> 

      <!-- Box 2 --> 

      <div id="box2" class="boxDiv"> 
       <div class="upperRound"></div> 
       <div class="boxTagLine"> 
         Some Tag Line 
       </div> 
       <div class="boxContent"> 
        Heres some content 
       </div> 
       <div class="lowerRound"></div> 
      </div> 

     </div> 


    </body> 
</html>

CSS의 :

#containerDiv { 
    width: 1000px; 

} 
.boxDiv { 
    width: 248px; 
} 
.upperRound { 
    background-image: url('rounded_upper.gif'); 
    height: 20px; 
} 

.lowerRound { 
    background-image: url('rounded_lower.gif'); 
    height: 20px; 
} 

.boxContent,.boxTagLine { 
    border-left: 2px solid #B5B5B5; 
    border-right: 2px solid #B5B5B5; 
    padding: 10px; 
    background-color:#F8F8F8; 
    solid #B5B5B5; 

} 

.boxTagLine { 
    color:#0066FF; 
} 

#box1 { 
    float:left; 
}

출처

2009-11-17 JoeRP

는'-moz-국경 radius' 및 기타 옵션을 당신은 알고 있습니까를 코너에서 쉽게 반올림하기 위해 CSS에서 사용할 수 있습니까? 대부분의 점잖은 브라우저에서 사용할 수 있습니다 (따라서 IE는 지원되지 않습니다) https://developer.mozilla.org/En/CSS_Reference/Mozilla_Extensions –

둘째 사업부는 부동 소수점을 취소해야 오른쪽 다음 요소로 떠해야합니다. 잠시 더 많은 정보를 추가하겠습니다.

나는 약간 잘못되었습니다. div를 지울 필요조차 없습니다.

체크 아웃이 question입니다.

그래서 - 귀하의 경우, CSS이 추가 =>

#box2 { 
    float:right; 
} 

#containerDiv { 
    width: 1000px; 
    overflow: hidden; 
}

나는 그것을 시도하지 못했지만, 그것을 작동합니다.

광산 접근 방식은 상자 사이에 공백을 남깁니다. 그래서 - 원하는 효과가 없을 수도 있습니다.

출처

2009-11-17 09:17:54

당신은 스팬

하지만를 사용하여 더 나을 것이다 당신은 div를 사용하는 경우 : 두 상자 왼쪽

.boxDiv { 
    width: 248px; 
    display: inline; 
}

출처

2009-11-17 09:20:09

더 좋은 접근 방법입니다. :) –

플로트 :

#box1,#box2 { 
    float:left; 
}

출처

2009-11-17 09:23:36 Paul

당신은 떨어져 더 나은 부동 것 .boxDiv 왼쪽, 이렇게 :

.boxDiv { 
    width: 248px; 
    float: left; 
}

당신이 그렇지 않으면 당신은 특정 클래스 이름 추가 거라고, 그들은 바로 떠 것보다 상자를 추가하는 경우 그 방법 :

#box1, #box2, #box3, #box4 { 
    float:left; 
}

출처

2009-11-17 16:32:36

둥근 모서리 상자를 옆에 정렬

답변

관련 문제