aligning elements left and right

我有一個網頁，有兩列，我必須向左浮動，而另一個向右浮動，在正常網頁上工作正常。但是，當我在手機上查看它（例如我有移動jQuery和CSS），所以它都適合屏幕的尺寸。而且由於兩列頁面不適合，它會將它放在下一行，然後看起來是錯誤的，因爲右側的列然後在下一行對齊。在不使用float css屬性的情況下，左右對齊的最佳方法是什麼？我想我應該可以通過設置邊距或填充百分比來做到這一點。任何想法最好的方式來做到這一點？aligning elements left and right

來源

2013-01-15 user541597

爲身體設置最小寬度，以便兩個div適合同一行。

body{ 
min-width: 800px; //or whatever the size of the two divs is 
}

來源

2013-01-15 18:07:16 Cristy

你可能做的是正確的，但要刪除移動設備上的浮動性，並刪除寬度，如果你之前設置它，以便它們適合全屏幕，並應用邊距（如有必要）。

@media screen and (max-width: 480px) { 
    .floated-div { 
     float: none; 
     width: auto; 
     margin: 0 1em; 
    } 
}

你可以在這裏閱讀更多：http://css-tricks.com/css-media-queries/

來源

2013-01-15 18:07:58

這裏是展示如何使在同一行的兩個項目，而無需使用浮筒或Flexbox的一個jsbin（http://jsbin.com/funevi/2/edit?html,css,output）。爲了更好地做到這一點，使用內聯塊而不是浮動塊可以使左右內容相對於彼此垂直對齊。

默認值是相對於彼此頂部對齊。但是，將類vmiddle或vbottom添加到包含div.left-right元素時，會導致左側內容框和右側內容框相互對齊。

box-sizing：border-box允許我們跨瀏覽器安全地使用邏輯數字，並有助於防止內容在向左或向右內容div添加邊框或邊距時環繞四周。

使用內嵌塊元素時，爲了防止左右內容元素周圍出現空白，容器指定的字體大小爲0.然後將字體大小設置爲內容div的初始值。

最後的顏色在左，右內容的div設置簡單，使其在視覺上明顯的是如何左右垂直對齊彼此相對，並且不需要，很明顯。

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
    div.left-right { 
     box-sizing: border-box; 
     display: inline-block; 
     font-size: 0; 
     position: relative; 
     white-space: nowrap; 
     width: 100%; 
    } 

    div.left-right div.left, 
    div.left-right div.right { 
     box-sizing: border-box;  
     display: inline-block; 
     font-size: initial; 
     position: relative; 
     white-space: normal; 
     width: 50%; 
     vertical-align: top; 
    } 

    div.left-right.vmiddle div.left, 
    div.left-right.vmiddle div.right { 
     vertical-align: middle; 
    } 

    div.left-right.vbottom div.left, 
    div.left-right.vbottom div.right { 
     vertical-align: bottom; 
    } 

    div.left-right div.left { 
     background: firebrick; 
     text-align: left; 
    } 

    div.left-right div.right { 
     background: forestgreen; 
     text-align: right; 
    } 
    </style> 
    </head> 

    <body> 
    <div class="left-right"> 
     <div class="left"> 
     <p>Paragraph 1</p> 
     </div> 
     <div class="right"> 
     <p>Paragraph 1</p> 
     <p>Paragraph 2</p>   
     </div> 
    </div> 
    </body> 
</html>

來源

2015-01-08 05:58:20 nyteshade

aligning elements left and right

回答

相關問題