[英]Where to Place Div Without Ruining Current Layout
我目前正在使用幾個div來設置背景樣式以及設置用於懸停的疊加層。 問題是我想創建一個額外的div，以便我也可以在懸停時設置框的樣式，但是我不確定在不破壞格式的情況下將新的div放置在HTML中的位置（.captionbox類例如）。
我的代碼和JS Fiddle如下。 任何幫助表示贊賞。
body { background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg'); height:100%; margin:0; padding:0; } .bg { position:fixed; width:50%; height:50% } #nw { background-image: url('clevelandnight.jpg'); background-size:cover; } #ne { top:0; left:50%; background-image: url('news1.jpg'); background-size:cover; } #sw { top:50%; left:0; background-image: url('drinks1.jpg'); background-size:cover; } #se { top:50%; left:50%; background-image: url('clevelandday.jpg'); background-size:cover; } .overlay { height:100%; text-align:center; -webkit-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out; -moz-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out; -o-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out; -ms-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out; transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out; } .bg:hover .overlay { background:rgba(0, 0, 0, .75); opacity: 1; height:100%; } .caption { font-family: 'Open Sans Condensed', sans-serif; font-weight:100; color:white; font-size:36pt; white-space:nowrap; -webkit-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s; -moz-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s; -o-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s; transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s; } .bg:hover .caption { color:#7D7D7D; font-size:72px; white-space:nowrap; margin-right:70%; } .captionbox { height:100px; width:100px; background-color:white; opacity:0; border: 5px solid red; }
<div id='nw' class='bg'> <div class='overlay'> <span class='caption'>Night Life</span> </div> </div> <div id='ne' class='bg'> <div class='overlay'> <span class='caption'>News</span> </div> </div> <div id='sw' class='bg'> <div class='overlay'> <span class='caption'>Food & Drink</span> </div> </div> <div id='se' class='bg'> <div class='overlay'> <span class='caption'>Events</span> </div> </div>
如果您將div display:none ，則不會占用頁面上的任何空間。 我假設它作為標題框將position: absolute ，因此一旦應用了該樣式，無論如何將不會影響您的布局。 因此，您應該可以將它作為<body>的子級放在頂層。
如何在div右側顯示圖像而不破壞flex布局？
[英]How to display image on the right side of div without ruining flex layout?
我的第一個 div 上有大約 20 像素的空白區域。 如何在不破壞頁面布局的情況下刪除它？
[英]There is approximately 20 pixels of blank space over the first div of my. How can I remove it without ruining the layout of the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.