Question

＆＃13;

div#banner>img {
  float: left;
  background-color: #4b634b;
  height: 265px;
  width: 80%;
}

ul {
  float: left;
  background-color: #769976;
  width: 162px;
}

＆＃13;

<body>
  <div id="wrapper">
    <header>
      <nav>
        <ul>
          <li><a href="1.html" class="active">one</a></li>
          <li><a href="2.html">two</a></li>
          <li><a href="3.html">three</a></li>
        </ul>
      </nav>
      <div id="banner">
        <img src="pic.jpg">
      </div>
    </header>
    <!--...rest of body and wrapper...-->
  </div>
</body>

＆＃13;

你好，我google了很多，但还没有得到很好的答案，问题是我想让左上方的导航，并将横幅附加到包装的右边界，现在用css吧可以工作，但只能在全屏，在某一点它插入两个之间的换行符，我怎么能阻止这个？谢谢你的帮助

Answer 1

将width值更改为总计小于100％的百分比值。

评论后的补充：

您可以将图像元素设置为width: calc(100% - 162px);这将使其全宽减去另一个元素所需的162px

Answer 2

你的问题不是很清楚，但我认为问题在于你的元素超出了视口宽度。尝试使用百分比或动态

设置宽度

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="wrapper">
		<header>
			<nav>
				<ul>
					<li>
						<a class="active" href="1.html">one</a>
					</li>
					<li>
						<a href="2.html">two</a>
					</li>
					<li>
						<a href="3.html">three</a>
					</li>
				</ul>
			</nav>
			<div id="banner"><img src="pic.jpg"></div>
			<p>Content here</p>
			<p></p>
		</header>
	</div>
	<style>
	div#banner>img {
	   background-color:#4b634b;
	   height:265px;
	   width: 80%;
	}

	ul {
	   float:left;
	   background-color: #769976;
	   width:20%x;
	}
	#wrapper{
	   width:100%;
	  }


	</style>
</body>
</html>

＆＃13;

Answer 3

感谢所有帮助过的人们，我尝试了几种东西，因为还有一些其他东西让它变得更加困难

就像包装器有一个格式太绝对没有用完

可能是我的错，因为我没有问得足够精确，谢谢你的伟大而快速的帮助

＆＃34;您可以将图像元素设置为width：calc（100％ - 162px）;这将使其全宽减去另一个元素所需的162px＆＃34;

感谢约翰内斯和其他所有人，这是最佳选择！

CSS如何避免css元素之间的换行？

3 个答案: