將頁面分爲兩部分

What I am trying to achieve 我有一個Facebook應用程序，現在我正在開發前端。我剛剛開始使用CSS和HTML，所以這可能是一個愚蠢的問題 - 對此感到抱歉。我想要做的是將頁面分爲兩部分。我爲此創建了兩個div，但問題在於它們的定位方式。我的代碼如下：將頁面分爲兩部分

<style> 
.choose_div{ 
    width: 20%; 
    height: auto; 
    padding: 1px; 
    left: 0px; 
    border: 2px; 
} 
.frame_div{ 
    right:0px; 
    height: auto; 
    width: 80%; 
    border: 2px 2px 2px 2px; 
    position: relative; 
} 
</style> 
    <div id="choose_div"> 
    <ul> 
     <li class="li_choose"> 
     <div class="li_div"> 
      <p>Save</p> 
      <img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%"> 
      <hr> 
     </div> 
     </li> 
    </ul> 
    </div> 
<div id="frame_div"> 
    <iframe id="frame_opened"> 
</div>

我認爲right:0px;對於其中另一left:0px;會正確定位，但他們只是一個在其他的底部。
任何人都可以請幫忙嗎？

來源

2013-04-06 Bujanca Mihai

當你說「將頁面分爲兩部分」時，你究竟在做什麼？也許一個例子或圖像可能會有幫助。 – AUSteve 2013-04-06 13:59:12

這是使用float:left;來做你要求的正常方法。有你的風格的幾個其他問題，但：

你被靶向.choose_div類（.），而不是ID（#）
您需要使用box-sizing:border-box當你這樣做，否則padding在width:20%之上添加border，使寬度大於20％。

jsFiddle

#choose_div { 
    width: 20%; 
    height: auto; 
    padding: 1px; 
    border: 2px; 
    float:left; 
    box-sizing:border-box; 
} 
#frame_div { 
    height: auto; 
    width: 80%; 
    border: 2px 2px 2px 2px; 
    float:left; 
    box-sizing:border-box; 
}

至於left和right，它們可用於如使用position:absolute對齊到屏幕的特定側。 position:relative只是將元素移動一個特定的量，例如left:2px會將元素2個像素向左移動。

position:absolute將該元素定位在其最近的祖先上，該元素具有非靜態的position。然後left/right/top/bottom可用於指示祖先的兩側。

來源

2013-04-06 14:00:29

爲其顯示寫在div：

float:left

而對於正確的：

float:right 

<style> 
#choose_div{ 
    width: 20%; 
    height: auto; 
    padding: 1px; 
    left: 0px; 
    border: 2px; 
    float:left; 

} 
#frame_div{ 
    float:right; 
    right:0px; 
    height: auto; 
    width: 80%; 
    border: 2px 2px 2px 2px; 
    position: relative; 
} 
</style>

如果您添加邊框，您必須縮小你的div witdh。或者他們溢出父節，並看到自上而下。

來源

2013-04-06 13:58:56 zkanoca

<style> 
html,body{margin:0;} 
#choose_div{ 
    display:block; 
    float:left; 
    width: auto; 
    height: 100%; 
    padding: 1px; 
    } 
#frame_div{ 
float:right; 
height: auto; 
    width: 80%; 
    height: 100%; 
    border: 2px 2px 2px 2px; 
    border-left:solid 2px #000000; 
    padding:10px; 
    overflow:hidden; 
} 
    </style> 
    <body> 

     <div id="choose_div"> 
     <ul> 
      <li class="li_choose"> 
      <div class="li_div"> 
       <p>Save</p> 
       <img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%"> 
       </div> 
      </li> 
     </ul> 
     </div> 

    <div id="frame_div"> 
     <iframe id="frame_opened"> 
    </div>

來源

2013-04-06 14:12:49

將頁面分爲兩部分

回答

相關問題