Question

我试图在左侧放置图像，在右侧放置文字。我设法做到了这一点，然而，文本一直持续到页面结束，直到它突破到一个新行，这不是我想要它做的。我希望它停在我的导航栏停止的同一Y位置，但我不知道该怎么做。我环顾四周，尝试了几种不同的方法，但似乎都没有。

我的HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LoL</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<a href="#Best champions for each role"><img src="assets/lol.png" alt="Logo" 
id="image1"></a>
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li><a href="#Farming">Farming</a></li>
<li><a href="#Best champions for each role">Best champions for each role</a>
</li>
</ul>
<img src="assets/minions.png" alt="Minions in LoL" id="image2" >
<p1>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim  
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque 
porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et 
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis 
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid 
ex ea commodi 
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo 
voluptas nulla pariatur?</p1>
<banner></banner>
</body>
</html>

我的CSS

#image1 {
display: block;
margin-left: auto;
margin-right: auto;
height: 8%;
width: 30%;
}

#image2 {
width: 30%;
right: 200px;
margin-left: 285px;
float: left;
border: 5px;
border-style: groove;
border-color: black;
}

ul {
top: 150px;
display: flex;
list-style-type:none;
width:60%;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
background-color: rgba(163,21,23,1.00)
}

li {
float: right;
width: 33.33%;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: thin;
border-style: groove;
}

li a:hover {
background-color: #111;
}

body {
background-color: rgba(96,96,96,1.00)
}

p1 {
font-family: Comic Sans MS;
font-size: 11px;
margin-left: 5px;
}

Answer 1

当您在CSS中设计所有不同的代码时，您还应该正确设计p1文字。

肮脏而快速的解决方法就像：

p1 {
        font-family: Comic Sans MS;
        font-size: 11px;
        margin-left: 50px;
        display: flex;
        list-style-type:none;
        width:60%;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        overflow: hidden;
    }

将您当前的p1 css更改为此。这不是干净的代码，但是正如你所说，这是一个需要在6个小时内完成的学校项目，就像上面那样脏了。

祝你学校的项目好运。

如何让文本在某一点停止并转到下一行？

1 个答案: