중첩 된 DIV가 자동을 따르지 않음

아래 이미지를 참조하십시오. 왼쪽과 오른쪽 테두리가 사용 가능한 공간을 채우지 못함을 알 수 있습니다. 이들은 중첩 된 div입니다. 어떻게하면 자동에 순응합니까? 예상대로중첩 된 DIV가 자동을 따르지 않음

CSS 클래스 MiddleLeftBorder 및 MiddleRightBorder이 작동하지 않습니다. 아래

CSS 코드 :

html, body 
{ 
    height: 100%; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
} 
body 
{ 
    background-color: #000000; 
    background-image: url('/CatwalkCloset/App_Themes/Default/Images/Background.jpg'); 
    background-repeat: repeat; 
    color: #FFFFFF; 
} 
/* TEMPLATE */ 
container 
{ 
    height: auto; 
    margin: auto; 
    width: 100%; 
} 
div.content 
{ 
    clear: both; 
    height: auto; 
    margin: 0px auto; 
    text-align: center; 
    width: 1024px; 
} 
div.rows div.row 
{ 
    clear: both; 
    width: 1024px; 
} 
div.rows div.column 
{ 
    float: left; 
} 
div.rows div.clear-row 
{ 
    line-height: 0px; 
    font-size: 0px; 
    clear: both; 
} 
div.logo 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/Logo.jpg'); 
    height: 150px; 
    width: 510px;  
} 
div.logoSpace 
{ 
    background-color: #000000; 
} 
div.menu 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/MenuBackground.jpg'); 
    background-repeat: repeat; 
    height: 40px; 
    width: 1024px; 
} 
div.topLeftBorder 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/TopLeftBorder.jpg'); 
    float: left; 
    height: 40px; 
    width: 40px; 
} 
div.topMiddleBorder 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/TopMiddleBorder.jpg'); 
    background-repeat: repeat; 
    float: left; 
    height: 40px; 
    width: 944px; 
} 
div.topRightBorder 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/TopRightBorder.jpg'); 
    float: left; 
    height: 40px; 
    width: 40px; 
} 
div.middleLeftBorder 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/MiddleLeftBorder.jpg'); 
    background-repeat: repeat; 
    float: left; 
    height: 100%; 
    width: 40px; 
} 
div.middleContent 
{ 
    float: left; 
    height: 100%; 
    width: 944px;  
} 
div.middleRightBorder 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/MiddleRightBorder.jpg'); 
    background-repeat: repeat; 
    float: left; 
    height: 100%; 
    width: 40px; 
} 
div.bottomLeftBorder 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/BottomLeftBorder.jpg'); 
    float: left; 
    height: 40px; 
    width: 40px; 
} 
div.bottomMiddleBorder 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/BottomMiddleBorder.jpg'); 
    background-repeat: repeat; 
    float: left; 
    height: 40px; 
    width: 944px; 
} 
div.bottomRightBorder 
{ 
    background: url('/CatwalkCloset/App_Themes/Default/Images/BottomRightBorder.jpg'); 
    float: left; 
    height: 40px; 
    width: 40px; 
}

HTML 코드는 아래 위의 CSS 코드를 사용

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <asp:ContentPlaceHolder id="cphMasterHead" runat="server"></asp:ContentPlaceHolder> 
</head> 
<body> 
    <form id="fMaster" runat="server"> 
    <div id="container"> 
     <div class="content"> 
      <div class="rows"> 
       <div class="row"> 
        <div class="logo"></div> 
        <div class="logoSpace"></div> 
        <div class="clear-row">&nbsp;</div> 
       </div> 
       <div class="row"> 
        <div class="menu"></div>  
        <div class="clear-row">&nbsp;</div> 
       </div> 
       <div class="row"> 
        <div class="topLeftBorder"></div> 
        <div class="topMiddleBorder"></div> 
        <div class="topRightBorder"></div> 
        <div class="clear-row">&nbsp;</div> 
       </div> 
       <div class="row"> 
        <div class="middleLeftBorder"></div> 
        <div class="middleContent"><asp:ContentPlaceHolder id="cphMasterBody" runat="server"></asp:ContentPlaceHolder></div> 
        <div class="middleRightBorder"></div> 
        <div class="clear-row">&nbsp;</div> 
       </div> 
       <div class="row"> 
        <div class="bottomLeftBorder"></div> 
        <div class="bottomMiddleBorder"></div> 
        <div class="bottomRightBorder"></div> 
        <div class="clear-row">&nbsp;</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    </form> 
</body> 
</html>

출처

2012-06-05 c0D3l0g1c

일부 HTML이 없으면이 CSS에 문맥이 없습니다. –

[예제를 ** 관련 ** 코드에만 정리하십시오] (http://meta.stackexchange.com/a/129787/162730)도 제공해 주실 수 있습니까? – Jeroen

모든 코드가 적절합니다. 그것 없이는 어떤 혼란이 일어날 것입니다. – c0D3l0g1c

왜 순수 CSS와 함께 할 수있는 일에 대한 이미지를 사용하는을 (border-radius) ? 그 프레임은 #content입니다. 하지만 알았어 ..

우선 CSS 클래스와 HTML 마크 업이 올바른 것처럼 보이기 때문에 이미지에 쓴 경로가 있는지 확인하십시오 (F12 및 네트워크 탭을 사용하여 오류가 없는지 확인하십시오). 은 우수이며, 바로 입니다.입니다. 당신이 .row, .middleContent, .middleLeftBorder 및 .middleRightBorder에 대한 고정 폭을 사용하기 때문에

, 당신의 배경 온을 buiding위한 3 개 이미지를 사용할 필요가 없다 - 당신이 그들을 .row 하나의 배경으로 결합하여 사용할 수 있습니다. 또한이 .row

내가 여기 개선하기 위해 너무 많은이 있다고 생각에 clear: both;있는 동안 div.clear-row를 사용할 필요 ..

좋아, 대한 둥근 모서리가 없습니다.

<div id="container"> 
    <div id="content">Some text here</div> 
</div> 

<style> 
#container { 
    width: 200px; 
    padding: 15px; 
    background-color: #000; 
} 
#content { 
    padding: 30px; /* real content must be moved away from border */ 
    border: 1px solid #fff; 
    color: #fff; 
    width: 138px; /* #container width - 2*padding - 2*border */ 
    border-radius: 20px; /* Basic CSS */ 
    -moz-border-radius: 20px; /* Mozilla */ 
    -webkit-border-radius: 20px; /* Safari, Chrome */ 
    -o-border-radius: 20px; /* Opera */ 
    -ms-border-radius: 20px; /* IE9+ */ 
} 
</style>

당신은 검은 색 바탕에 둥근 모서리를 흰색 사각형을 얻어야한다 : 당신은 당신이 (느슨하게 당신 관련)이 코드를 사용하여 원하는 생각하는 무언가를 얻을 수 있습니다.

출처

2012-06-05 21:26:27 Wirone

저는 CSS 전문가가 아닙니다. 콘텐츠 주위에 둥근 테두리를 만드는 쉬운 방법이 있다면 ... 나는 모든 귀입니다! – c0D3l0g1c

그냥 내 편집 된 답변을 참조하십시오. – Wirone

안녕하세요. 이 솔루션은 나를 위해 작동하지 않았다. 나는 IE9를 사용하고있다. 검은 색으로 채워진 사각형 상자를 보여줍니다. 그런 다음 텍스트가있는 흰색 직사각형 테두리. 둥근 모서리가 없습니다. – c0D3l0g1c

중첩 된 DIV가 자동을 따르지 않음

답변

관련 문제