在屏幕上保留兩個div，不管寬度如何

-1

我正在製作一個網站，該網站將有兩個div，每個div位於網站的兩側，並將調整爲適合屏幕的大小。我嘗試了一格70％和其他25％，理論上這應該適用於任何尺寸，但它確實滑落。我試圖使用絕對定位，但是這搞亂了我的格式化，而且我碰到了一堵磚牆。任何幫助或提示，表示讚賞。在屏幕上保留兩個div，不管寬度如何

Screen width of 500 px, both divs fit.

Screen width of 250 px, the right one slides down.

來源

2017-05-05 Alex G

發佈您的代碼，很難調試圖像:-) – Capsule

如果您的利潤率不是基於百分比，一旦屏幕變得足夠小，div不會停留在彼此旁邊。要麼確保你的寬度和邊距加起來不超過100％（並且確定你是否有填充，你正在使用'box-sizing：border-box'）。如果你想把你的邊距保持在像px這樣的單位，你可以使用'width：calc（70％ - 20px）'來設置div的寬度，其中20px是你的邊距的總和。 – Santi

您是否嘗試過使用Flexbox？ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – chharvey

這聽起來像你正在使用內聯塊，但很難知道到底是怎麼回事，沒有看到你的代碼。嘗試執行以下操作：

嘗試將所有邊距設置爲0，包括正文。
確保在打開每個div之前或每個div的關閉之後沒有空格（包括空格，製表符或回車符）。額外的空間會拋棄。

對於數字2，您可以保留您的結構並使用註釋，以便忽略空白。

<body><!-- 

--><div id="70percentdiv"> 


    </div><!-- 
    --><div id="30percentdiv"> 

    </div><!-- 
--></body>

在這裏，我用身體元素，但是如果你之前或之後，立即有其他元素的div利用這些的人來代替。再次，如果沒有看到代碼，很難確切知道發生了什麼。

來源

2017-05-05 02:05:15 kojow7

現在有更高級的CSS佈局，所以你不需要訴諸浮動divs，就像你在21世紀初會做的那樣。應該爲他們的originally meant for保留花車。

以下三個選項可用於佈置頁面上的內容。所有3個選項都是純CSS的;不需要額外的庫或框架。你只需要注意瀏覽器的支持。查看Mozilla Developer Network瞭解更多信息。我喜歡這個資源，每一天我都會使用它。第一個選項是使用Flexbox。 Flexbox是爲一維佈局構建的，例如一排框，雖然如果沒有足夠的空間，該行可能會換行到下一行。（「換行到下一行」不算二維，因爲您無法控制換行的位置。）在您的示例中，單行上有兩個框，所以Flexbox是完美的。

<style> 
    .row { 
    display: flex;     /* set up flexbox */ 
    flex-direction: row;   /* left-to-right flow */ 
    flex-wrap: nowrap;    /* prevent wrapping */ 
    justify-content: space-between; /* put all remaining space 
     between the boxes, with no space on either end */ 
    align-items: stretch;   /* vertically stretch the boxes 
     to fill the entire height of the row */ 
    } 
    .box-main { flex: 1 1 70%; } /* suggest 70%, but allow flexibility */ 
    .box-side { flex: 1 1 25%; } /* suggest 25%, but allow flexibility */ 
    /* alternatively, if you don’t want any growing or shrinking, you can do: 
    .box-main { flex: 0 0 70%; } 
    .box-side { flex: 0 0 25%; } */ 
</style> 
<div class="row"> 
    <main class="box-main">Main content lorem ipsum dolor ...</main> 
    <aside class="box-side">Side content lorem ipsum dolor ...</aside> 
</div>

之一許多優勢Flexbox將有超過花車的是，你可以更改項目的順序，只使用CSS（而不必更改標記/ DOM）。因此，您不會鎖定哪些內容會出現在「左側」，哪些內容會出現在「右側」。此外，諸如.box-main和.box-side之類的「語義」類名是未來友好的：如果您想將其移動到頁面的左側，則命名邊欄.right將是愚蠢的。

另一種選擇是使用CSS Grid，但我不會推薦格爲這種特定情況下，因爲它確實意味着二維佈局。但是，如果不是矯枉過正，這是可能的。

<style> 
    .grid { 
    display: grid;     /* set up grid */ 
    grid-template-columns: 70% 25%; /* define 2 columns, in this order */ 
    grid-template-rows: auto;  /* define 1 row, no specified height */ 
    grid-column-gap: 5%;   /* gap between columns */ 
    } 
    /* that’s it! no need for classes on the boxes */ 
</style> 
<div class="grid"> 
    <main>Main content lorem ipsum dolor ...</main> 
    <aside>Side content lorem ipsum dolor ...</aside> 
</div>

第三種選擇是使用Multi-Column佈局，但因爲它需要所有的列具有相同的寬度它不會在你的情況適用。

來源

2017-05-05 02:22:45 chharvey

在屏幕上保留兩個div，不管寬度如何

回答

相關問題