1. 首頁
  2. 問答
  3. 子div不填充div

子div不填充div

2017-08-31 112 views
1

我在構建自定義表時遇到問題。我已經嘗試過Chrome Inspection Tool並改變了一切，但沒有讓我朝着目標邁進。我已經搜遍了所有東西，但沒有任何東西可以幫助我。我不能成爲唯一一個面臨這個問題的人，認真...子div不填充div

表已經實現到頁面，但我做了一個簡化的版本來重現這個問題。

.scrollwrapper { 
 
    overflow: auto; 
 
    border-radius: 2px; 
 
} 
 

 
.outtertable { 
 
    transition: .2s; 
 
    color: #333; 
 
    background-color: rgba(0, 0, 0, 0.03); 
 
    display: flex; 
 
} 
 

 
.theader { 
 
    font-weight: 600; 
 
} 
 

 
.tbody:hover { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
} 
 

 
.item { 
 
    min-width: 50px; 
 
    padding: 10px; 
 
    width: 150px; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}
<div class="scrollwrapper"> 
 
    <div class="outtertable theader"> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    </div> 
 

 
    <div class="outtertable tbody"> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    </div> 
 
</div>

上面的代碼的結果是這樣的： Screenshot_78.png

任何幫助不勝感激。

編輯：給出了答案，但我需要說的是，當div寬度縮小時，項目應該彼此接近。

來源

2017-08-31 Fusseldieb

+0

目前尚不清楚你想要什麼。你沒有問一個問題。 「小孩不填滿div」並不告訴我，如果你認爲最內層的兒童是問題，或者中間的兒童是問題。問題是否總是發生，或者只有當你把窗戶縮小時纔會發生？ （我提出的一些問題似乎很明顯......但你只是要求我們猜測並假設...） –

+0

@JosephHansen我希望黑暗的內容能填滿外面的div，但可悲的是沒有。 – Fusseldieb

+0

當我在Stack Overflow中點擊「運行代碼片段」時，它可以工作。 （我正在更新Chrome和macOS。） –

回答

1

你的問題是你做不到Flexbox和具有相同HTML元素的表格。但是，如果你只關注你擁有的東西，那麼你可以解決你的具體問題：需要縮小或擴大並且可能溢出的並排div組。

您可以在代碼中看到混淆。您希望三級兒童能夠溢出並相對於一級父母進行滾動，但是您想要爲二級兒童着色，而不是三級兒童。

在這種情況下，你不處理行和列。您的行的長度將只是容器中可用空間的長度（第一級父級）; 「行」（第2級）不會延伸到包含所有內容（第3級），因爲它們是display: flex;。

enter image description here

正如你可以看到，該行滾動與頂部的父元素中的孩子，而不是孩子們的行內滾動。

要在一行中的所有元素上放置背景顏色，實際上必須將其放置在單個元素上。但是，你可以說只有一類特殊的孩子將有背景顏色，就像這樣：

.tbody:hover > .item { 
    background-color: rgba(0,0,0,.1); 
}

下面的代碼你想要做什麼：

.outtertable { 
 
    transition: .2s; 
 
    color: #333; 
 
    display: flex; 
 
} 
 

 
.outtertable>.item { 
 
    background-color: rgba(0, 0, 0, 0.03); 
 
} 
 

 
.theader { 
 
    font-weight: 600; 
 
} 
 

 
.tbody:hover>.item { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
} 
 

 
.item { 
 
    min-width: 50px; 
 
    padding: 10px; 
 
    width: 150px; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}
<div class="outtertable theader"> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
</div> 
 

 
<div class="outtertable tbody"> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
</div>

公告：你可以擺脫.scrollwrapper股利，它的工作原理是一樣的。

來源

2017-08-31 14:14:29

+0

工作完美。非常感謝您的努力。 – Fusseldieb

0 

.scrollwrapper { 
 
    overflow: auto; 
 
    border-radius: 2px; 
 
} 
 

 
.outtertable { 
 
    transition: .2s; 
 
    color: #333; 
 
    background-color: rgba(0, 0, 0, 0.03); 
 
    display: flex; 
 
} 
 

 
.theader { 
 
    font-weight: 600; 
 
} 
 

 
.tbody:hover .item { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
} 
 

 
.item { 
 
    min-width: 50px; 
 
    padding: 10px; 
 
    width: 150px; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}
<div class="scrollwrapper"> 
 
    <div class="outtertable theader"> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    </div> 
 

 
    <div class="outtertable tbody"> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    </div> 
 
</div>

來源

2017-08-31 12:42:07 anu

+0

它仍然沒有收縮= /（當我看到我的，當div /窗口變小時，物品變得彼此更接近） – Fusseldieb

+0

這樣做不會**以_useful_方式回答問題。 **爲什麼**你相信這是答案嗎？ **它是如何工作的？簡單地告訴某人改變他們的代碼_或者僅僅給予一個沒有任何背景或意義的工作代碼的人不會幫助他們瞭解他們做錯了什麼，並且對未來的讀者也沒有什麼用處。 – GrumpyCrouton

+0

我嘗試了所有情況下，這工作。所以我發佈了。這取決於提問者接受還是不接受答案。 – anu

1

添加background-color到包裝，並移動懸停效果到行：

.tbody:hover .item { 
    background-color: rgba(0, 0, 0, 0.1); 
} 


.scrollwrapper { 
 
    overflow: auto; 
 
    border-radius: 2px; 
 
    background-color: rgba(0, 0, 0, 0.03); 
 
} 
 

 
.outtertable { 
 
    transition: .2s; 
 
    color: #333; 
 
    display: flex; 
 
} 
 

 
.theader { 
 
    font-weight: 600; 
 
} 
 

 
.tbody:hover .item { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
} 
 

 
.item { 
 
    min-width: 50px; 
 
    padding: 10px; 
 
    width: 150px; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}
<div class="scrollwrapper"> 
 
    <div class="outtertable theader"> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    </div> 
 

 
    <div class="outtertable tbody"> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    <div class='item'>Item</div> 
 
    </div> 
 
</div>

來源

2017-08-31 13:07:19 sol

相關問題

 相關問題