英文:
How to stop a flexed div from rezising and overlapping into other elements?
问题
* {
margin: 0;
padding: 0;
--link-easing-time: 0.15s;
}
body {
display: flex;
flex-direction: column;
}
.overview {
background-image: url(/Images/1.jpeg);
background-size: cover;
width: 100%;
height: 25em;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5em;
}
.overview div {
width: 50%;
background-color: rgb(30, 30, 30);
border-radius: 1em;
display: flex;
flex-wrap: nowrap;
flex-basis: initial;
justify-content: center;
align-items: center;
flex-direction: column;
}
.overview p {
margin: 1em;
color: rgba(255, 255, 255, 0.9);
}
.overview a {
margin: 1em;
}
英文:
I am currently goofing around making a website. I want to make a description div in the center of the screen that will stay centered, and when the screen rezises not stretch up and intersect or overlap other elements. How would I go about this? For further demonstration I will post a video below of what I don't want.
https://i.stack.imgur.com/d1dwo.jpg
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
--link-easing-time: 0.15s;
}
body {
display: flex;
flex-direction: column;
}
.overview {
background-image: url(/Images/1.jpeg);
background-size: cover;
width: 100%;
height: 25em;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5em;
}
.overview div {
width: 50%;
background-color: rgb(30,30,30);
border-radius: 1em;
display: flex;
flex-wrap: nowrap;
flex-basis: initial;
justify-content: center;
align-items: center;
flex-direction: column;
}
.overview p {
margin: 1em;
color: rgba(255,255,255,0.9);
}
.overview a {
margin: 1em;
}
<!-- language: lang-html -->
<body>
<div class="overview">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, inventore sint, nam sunt nihil ipsam quia accusantium praesentium voluptates, fugiat dolorum rerum officia. Nisi aperiam cumque totam molestias earum commodi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error consectetur dolorem magnam nobis officiis minima facilis vel corrupti totam fugiat tempora alias libero accusamus illo animi delectus, ut nostrum consequatur.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit excepturi, modi repudiandae ad itaque adipisci ratione a sed, voluptatem, quas aliquam dolore commodi eos possimus dignissimos nobis rerum enim tenetur?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam inventore unde sequi laudantium sapiente, quisquam necessitatibus officia eum autem nihil exercitationem, magni corporis fuga nulla eligendi! Provident explicabo recusandae earum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis alias molestiae impedit dolores consectetur delectus voluptas saepe nam blanditiis dolorum. Inventore omnis dicta consequatur mollitia magnam! Cum corrupti aspernatur sapiente.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, laborum non. Fugit id inventore, sequi minima explicabo optio at ut, repellat ipsam quia nemo! Libero quidem eaque obcaecati tenetur dolor.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi exercitationem sint necessitatibus perferendis tempore quisquam earum ipsa minima, obcaecati dolore. Ut, unde. Mollitia animi assumenda facilis quis dolores provident asperiores!
</p>
<a href="" class="hover-effect">
Learn More
</a>
</div>
</div>
</body>
<!-- end snippet -->
I attempted messing with flex-basis:initial and flex-wrap: nowrap;.
答案1
得分: 0
所以我重写了代码，得出的结论是：<p> 标签影响了父 div 的大小，因此一旦我给 p 标签设置了高度和宽度的限制，并将溢出设置为隐藏，它就运行得很好！
英文:
So I re wrote the code and what conclusion I reached was that: the <p> tag was effecting the parent div size so once I gave the p tag a height and width containment and set the overflow to hidden it worked great!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论