在左右角獲得2div框

我想在左邊有一個右邊的角落裏有兩個div框。在左右角獲得2div框

關於以下代碼的幫助，它來了，但兩者不在同一個對齊。它一個接一個地來。這裏是我的代碼

<style> 
      html { margin:0; padding:0; font-size:62.5%; } 
      body { max-width:300px; font-size:14px; font-size:1.4em; } 
      h1 { font-size:1.8em; } 
      .demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px;float: left } 
      .demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px; float: right} 
     </style> 
     <link rel="stylesheet" href="style.min.css" /> 
    </head> 

    <body><div id="frmt" class="demo"></div> 
     <div id="frmt1" class="demo1"></div> 
     </body>

問：那麼，像

，我希望它看起來像

來源

2016-05-12 Mr x

的[水平取向的div]可能的複製問題（http://stackoverflow.com/questions/的方法不止一種9277311/horizontal-aligning-divs） –

您已設置正文的最大寬度。 – Jon

這是因爲在你bodymax-width: 300px;。刪除這將做的伎倆。

demo和demo1有min-width每個200px，總計爲400px。但是body的max-width只有300px。

<head> 
 
    <style> 
 
    html { 
 
     margin: 0; 
 
     padding: 0; 
 
     font-size: 62.5%; 
 
    } 
 
    body { 
 
     font-size: 14px; 
 
     font-size: 1.4em; 
 
    } 
 
    h1 { 
 
     font-size: 1.8em; 
 
    } 
 
    .demo { 
 
     overflow: auto; 
 
     border: 1px solid silver; 
 
     min-height: 100px; 
 
     min-width: 200px; 
 
     float: left 
 
    } 
 
    .demo1 { 
 
     overflow: auto; 
 
     border: 1px solid silver; 
 
     min-height: 100px; 
 
     min-width: 200px; 
 
     float: right 
 
    } 
 
    </style> 
 
    <link rel="stylesheet" href="style.min.css" /> 
 
</head> 
 

 
<body> 
 
    <div id="frmt" class="demo"></div> 
 
    <div id="frmt1" class="demo1"></div> 
 
</body>

來源

2016-05-12 08:19:12 Pugazh

-1

試試這個

 <body><div id="frmt" class="demo" style="float:left;"></div> 
    <div id="frmt1" class="demo1" style="float:right;"></div> 
    </body>

來源

2016-05-12 08:19:49

Flex是越來越常見的地方，意味着你不必有你的箱子相隔那麼遠

.demo-container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.demo { 
 
    overflow: auto; 
 
    border: 1px solid silver; 
 
    min-height: 100px; 
 
    min-width: 200px; 
 
} 
 

 
.demo-button { 
 
    height: 25px; 
 
    margin: 20px; 
 
}

<div class="demo-container"> 
 
    <div id="frmt" class="demo"></div> 
 
    <button class="demo-button">>></button> 
 
    <div id="frmt1" class="demo"></div> 
 
</div>

我知道你的問題已經回答了，但總有解決:-)

來源

2016-05-12 08:44:36

在左右角獲得2div框

回答

相關問題