[英]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.