*{
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>这是我正在做的一个页面的代码，我在背景和使图像正确地位于文本旁边方面遇到了一些问题。
我想让图像位于文本的右侧，而不使用绝对位置或类似的位置。应该有一种方法来设置它，使文本和图像并排放置，但我想我做错了。
所以我想要左边的文字和右边的图片。
我以为向左浮动可能会起作用，但似乎没有，所以我只是想知道我做错了什么。
背景本身也在重复，这是他们阻止这种情况发生的任何方式，在链接图像下面，它重复自己并留下一行。我只是想知道你该怎么阻止。
任何帮助都将不胜感激，如果有问题，我会尽快回答。
这是一个基本的页面，我只想先对布局进行排序，然后再做得更好。
现在的样子
使用display: flex;将图像与文本右侧对齐。
对于背景重复，可以通过指定背景大小、位置和重复来修复它。
你想要的所有东西都应该包括在下面：(
* {
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>