Float：right元素不与float：left元素内联

Question

我有一个标题#resourceWrapTitle ，它以旋转方式显示。 我用于定位的一个方面是float:left 。 当我这样做时，它使我的容器在右边的位置从我想要的位置的顶部向下稍微显示#resourceCont 。 我将此容器设置为float:right ，所以我认为它会出现在标题旁边。

有谁知道为什么#resourceCont被压低以及如何解决？

我想要的容器的位置：

 #pdfBannerRight { width: 300px; background: #2f2f2f; height: 450px; position: absolute; top: 18%; right: 0; } #pdfBannerRightCont { position: relative; width: 100%; height: 100%; } #resourceWrapTitle { float: left; transform-origin: top left; margin: 3% 0 0 8px; -webkit-transform: rotate(-90deg) translateX(-100%); transform: rotate(-90deg) translateX(-100%); font-family: 'Nunito', sans-serif; letter-spacing: .2rem; font-size: 1.7rem; color: #FFF; text-transform: uppercase; } #resourceWrapTitle:after { content: ''; display: block; height: 4px; background: #FFF; width: 80%; text-align: center; margin: 10px auto; } #pdfResourceWrap { float: right; margin: 0 auto; padding: 20px 0; width: 80%; height: auto; } .pdfResource { width: 48%; height: auto; display: inline-block; vertical-align: top; margin: 15px 1%; padding: 5px 0; text-align: center; -webkit-transition: all .45s ease;transition: all .45s ease; } .pdfResource:hover { background: gray; -webkit-transition: all .45s ease;transition: all .45s ease; } .pdfResource img { width: 50px; height: auto; margin: 0 auto; } .resourceTitle { font-family: 'Nunito', sans-serif; font-size: .8rem; letter-spacing: .1rem; color: #F2F2F2; margin-top: 5px; line-height: 1.4em; padding: 0 5px; } 

 <div id="pdfBannerRight"> <div id="pdfBannerRightCont"> <h3 id="resourceWrapTitle">Resources</h3> <div id="pdfResourceWrap"> <div id="resourceCont"> <a href="#" class="pdfResource"> <img src="https://imagineacademy.microsoft.com/content/images/microsoft-img.png" alt="Img 1"> <h4 class="resourceTitle">Img 1</h4> </a><a href="#" class="pdfResource"> <img src="https://imagineacademy.microsoft.com/content/images/microsoft-img.png" alt="Img2"> <h4 class="resourceTitle">Img 2</h4> </a> </div> </div> </div> 

Answer 1

我所做的更改：

从

#resourceWrapTitle {
    float: left;
}

至

#resourceWrapTitle {
    position: absolute;
    top: 0;
    left: 0;
}

#pdfResourceWrap不在顶部的原因是，#resourceWrapTitle仍在顶部。 它旋转但仍在文档流中，保持其原始位置。 但是，当我从其中移除浮子并赋予它absolute位置时，它脱离了文档流动，因此没有保持其原始位置。 如果您仍然不清楚，请阅读CSS盒子模型和CSS位置 。

希望能有所帮助。 谢谢。

 #pdfBannerRight { width: 300px; background: #2f2f2f; height: 450px; position: absolute; top: 18%; right: 0; } #pdfBannerRightCont { position: relative; width: 100%; height: 100%; } #resourceWrapTitle { position: absolute; top: 0; left: 0; transform-origin: top left; margin: 3% 0 0 8px; -webkit-transform: rotate(-90deg) translateX(-100%); transform: rotate(-90deg) translateX(-100%); font-family: 'Nunito', sans-serif; letter-spacing: .2rem; font-size: 1.7rem; color: #FFF; text-transform: uppercase; } #resourceWrapTitle:after { content: ''; display: block; height: 4px; background: #FFF; width: 80%; text-align: center; margin: 10px auto; } #pdfResourceWrap { float: right; margin: 0 auto; padding: 20px 0; width: 80%; height: auto; } .pdfResource { width: 48%; height: auto; display: inline-block; vertical-align: top; margin: 15px 1%; padding: 5px 0; text-align: center; -webkit-transition: all .45s ease;transition: all .45s ease; } .pdfResource:hover { background: gray; -webkit-transition: all .45s ease;transition: all .45s ease; } .pdfResource img { width: 50px; height: auto; margin: 0 auto; } .resourceTitle { font-family: 'Nunito', sans-serif; font-size: .8rem; letter-spacing: .1rem; color: #F2F2F2; margin-top: 5px; line-height: 1.4em; padding: 0 5px; } 

 <div id="pdfBannerRight"> <div id="pdfBannerRightCont"> <h3 id="resourceWrapTitle">Resources</h3> <div id="pdfResourceWrap"> <div id="resourceCont"> <a href="#" class="pdfResource"> <img src="https://imagineacademy.microsoft.com/content/images/microsoft-img.png" alt="Img 1"> <h4 class="resourceTitle">Img 1</h4> </a><a href="#" class="pdfResource"> <img src="https://imagineacademy.microsoft.com/content/images/microsoft-img.png" alt="Img2"> <h4 class="resourceTitle">Img 2</h4> </a> </div> </div> </div>