Div僅向一個方向延伸

我使用Flare創建了一個文檔頁面並強制將麪包屑固定在頂部導航欄下方。該頁面按原樣運行，但我希望div在整個頁面上展開。請參閱當前的設計如下：Div僅向一個方向延伸

Click to see example screenshot

我可以舒展格爲100％，如果我的孩子DIV刪除min-width，但它延伸只到右邊，同時保持我想要麪包屑。下面的示例：

Click to see example screenshot

或者，我可以把它拉長100％通過父DIV添加left:0;，但隨後的麪包屑搬出的地方。我可以使用margin-right或right將div放置到合適的區域，但div在調整瀏覽器大小時不會與其餘內容同步。

來源

2017-08-25 RCB

請發表您的代碼，查看[如何提問]（https://stackoverflow.com/help/how-to-ask）以改善您的問題 –

極難提供無代碼的解決方案，但有可能是你的breadcrumbs div的父元素周圍的填充/邊距，這會導致它移到左側的右側。如果您可以發佈您的代碼，我相信有人可以提供更好的答案。 – sk03

我已經按照建議發佈了代碼。謝謝！ – RCB

試試這個：

*{ 
 
    padding:10px; 
 
} 
 
.parent { 
 
    margin:auto; 
 
    width:300px; 
 
    background-color:red; 
 
} 
 
.breadcrums { 
 
    background-color:blue; 
 
} 
 
.full-width { 
 
    background-color: green; 
 
    position:relative; 
 
    width:100vw; 
 
    left:50%; 
 
    transform:translateX(-50%); 
 
}

<div class="parent"> 
 
    <div class="breadcrums">breadcrums</div> 
 
    <div class="full-width">full-width element</div> 
 
</div>

的重要組成部分，這裏是上.full-widthposition，width，left和transform。

來源

2017-08-25 19:49:12 JRoss

如果調整窗口大小，麪包屑仍會移動。 – RCB

如果該div具有「絕對」位置，則應用css「left」屬性。

來源

2017-08-25 19:52:32

謝謝你的回覆。下面是HTML和CSS：

HTML：

<div class="crumbs_wrapper"> 
<div class="MCBreadcrumbsBox" > 
    <span class="MCBreadcrumbsPrefix">You are here:</span> 
    <a href="" class="MCBreadcrumbsLink">B1</a> 
    <span class="MCBreadcrumbsDivider"> B2 </span> 
    <a href=""class="MCBreadcrumbsLink">B3</a>... 
</div> 
</div>

CSS：

div.crumbs_wrapper 
{ 
position: fixed; 
    float: none; 
    width: 100%; 
    z-index: 1; 
} 

div.MCBreadcrumbsBox{ 
padding-bottom: 5px !important; 
    padding-top: 18px !important; 
    padding-left: 10px !important; 
    float: left; 
    position: relative; 
    margin-top: -12px; 
    background-color: #FFF; 
    z-index: 999; 
    width: 100%; 
    max-width: 104.5em; 
    box-shadow: 1.5px 1.5px 15px #888888; 
}

釷工具，我用的是耀斑，它沒有固定的麪包屑功能。自動生成麪包屑;我只更改了CSS值，並在.crumbs_wrapper類中添加了一個額外的div。其他類由軟件自動生成。

如果我刪除max-width div只向右延伸，如果我將left: 0;添加到父div，麪包屑會向左移動。我可以將麪包屑帶到我想要使用margin的位置，但在瀏覽器調整大小時不會保持不變。此外，填充和邊距頂部用於將麪包屑保留在頂部導航欄下方並與其餘內容對齊。

來源

2017-08-27 17:36:43 RCB

Div僅向一個方向延伸

回答

相關問題