背景和定位问题主要与CSS
[英]Background and positioning problem mainly with CSS
问题描述
*{ color: white; padding: 0; margin:0; box-sizing: border-box; } body{ background-image: url(black-1072366_1920.jpg); } #wrapper{ width: 90%; height: auto; overflow: auto } #heading{ width: 100%; font-size: 700%; color: red; } #text{ float: left; border: 5px solid red; } #screen{ width: 55%; height:auto; float: left; border: 5px solid red; } img{ width:100%; } <body> <div id='wrapper'> <h1 id='heading'> Game Over</h1> <div id-'text'> <p> Unlucky you failed on getting to the bus in time<br> <br> You have now missed the night out you've been looking <br> forward to for weeks. <br> <br> Well maybe next time will be a success. </p> <ul> <li>Flask Collected</li> <li> Keys Collected</li> <li>Wallet Collected</li> <li>Phone Collected</li> <li>Favourite Drink Collected</li> </ul> <p>Back to tv for tonight and the drawing board for the next outing.</p> <a href="Victory.html">Play Again</a> <br> </div> <div id='screen'> <img src="room-2559790_1280.jpg"> </div> </div>
So this is the code for a page i am doing and i am having some problems with backgrounds and getting the image to correctly sit next to the text.
所以这是我正在做的页面的代码，我在背景方面遇到了一些问题，并且让图像正确地位于文本旁边。
I wanted to get the image to sit to the right of the text without using the position absolute or something similar.我想让图像位于文本的右侧，而不使用 position absolute 或类似的东西。 There should be a way to set it up so that the text and image sit beside each other but I guess I am doing it wrong.应该有一种方法来设置它，使文本和图像并排放置，但我想我做错了。
So i want the text on the left and the image on the right side basically.所以我基本上想要左边的文字和右边的图像。
I thought float left might work but it did not seem to so I'm just wondering what I'm doing wrong.我认为左浮动可能有效，但似乎没有，所以我只是想知道我做错了什么。
The background is also repeating itself is their any way to stop this from happening in the link image down below it repeats itself and leaves a line.背景也在重复，他们以任何方式阻止这种情况发生在下面的链接图像中，它重复自身并留下一条线。 I'm just wondering how would you stop that.我只是想知道你将如何阻止它。
Any help would be appreciated and i will try to answer quick if there are questions.任何帮助将不胜感激，如果有问题，我会尽快回答。
This is a basic page I just want the layout sorted before making it better.这是一个基本页面，我只希望在改进布局之前对其进行排序。
1 个解决方案
解决方案1
2 已采纳 2021-04-04 18:02:56
Use display: flex;使用display: flex; to align the image to the right of the text.将图像与文本右侧对齐。
For the background repeating, you can fix it by specifying background size, position, and repeat.对于背景重复，您可以通过指定背景大小 position 并重复来修复它。
All the stuff you wanted should be included below:)你想要的所有东西都应该包括在下面:)
* { color: white; padding: 0; margin: 0; box-sizing: border-box; } body { background-image: url(black-1072366_1920.jpg); background-color: black; background-size:cover; background-position: center center; background-repeat: no-repeat; } #wrapper { width: 90%; height: auto; overflow: auto } #heading { width: 100%; font-size: 700%; color: red; } #text { float: left; border: 5px solid red; } #screen { width: 55%; height: auto; float: left; border: 5px solid red; } img { width: 100%; }.main { display: flex; }
<div id='wrapper'> <h1 id='heading'> Game Over</h1> <div class="main"> <div id="text"> <p> Unlucky you failed on getting to the bus in time<br> <br> You have now missed the night out you've been looking <br> forward to for weeks. <br> <br> Well maybe next time will be a success. </p> <ul> <li>Flask Collected</li> <li> Keys Collected</li> <li>Wallet Collected</li> <li>Phone Collected</li> <li>Favourite Drink Collected</li> </ul> <p>Back to tv for tonight and the drawing board for the next outing.</p> <a href="Victory.html">Play Again</a> <br> </div> <div id='screen'> <img src="room-2559790_1280.jpg"> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.