Question

在我的导航栏下方，我想在左边放一个旁边，在旁边放一个部分。我的旁边和部分应该在同一条线上不重叠。我现在的部分在新的一行下面。我该如何解决这个问题？

header {
	color:black;
	text-align:center;
	padding:5px;
	display:block;
}

#wrapper {
	width: 700px;
	margin: 0 auto;

}

#nav {
	width:500px;
	margin: 0 auto;
	list-style-type: none;
	white-space: nowrap;
	display:block;
}

#nav {
  padding: 10px 0;
  width:500px;
  margin: 0 auto;
  text-align: center;
  list-style-type: none;
  display:block;
  -webkit-box-shadow: 0 2px 10px -12px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
}

#nav li {
  display: inline-block;
}

#nav a {
	text-align:center;
	text-decoration:none;
	padding: 5px;
}

aside {
	padding:5px;
	height:200px;
	width:100px;
	display:block;
}

section {
	float:left;
	width:200px;
	padding:5px;
	display:inline-block;
}

<header>Portfolio</header>


<ul id="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Writing</a></li>
  <li><a href="#">Multimedia</a></li>
  <li><a href="#">Resume</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<aside>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdfsdf
sdf
</aside>

<section>
sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd
</section>

Answer 1

您需要word-wrap。然后你可以：

使用display: block和float:left。 https://jsfiddle.net/abalter/5cyp6tjh/
使用display: inline-block和vertical-align: top。 https://jsfiddle.net/abalter/cdsjsvL3/

修改如果你想让它们居中，最好的方法是使用包装而不是用宽度捏造。如果您尝试响应（移动），这将使您陷入麻烦。

https://jsfiddle.net/abalter/2a86ac1t/

HTML：

<div id="wrapper"> <aside> sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs sdfsdfsdfsdfsdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdfs sdfsdfsdfsdfsdfsdfsdfsdf sdf </aside> <section> sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd </section> </div>

CSS：

aside, section { display:inline-block; vertical-align: top; border: 1px dotted blue; word-wrap: break-word; } #wrapper { text-align: center; }

Answer 2

在float:right;代码的css中添加<aside>。

或

您可以将下面的<aside>移至section并在css中添加float:left;。

aside { padding:5px; height:200px; width:100px; float:right; }

使用word-break: break-all; aside和section来阻止重叠。

Answer 3

问题在于您已将display:block放在一边。要解决此问题，请使用float:left或display:inline-block代替display:block。像这样

aside {
    padding:5px;
    height:200px;
    word-break: break-word;
    float:left;
}

删除重叠。使用word-break: break-word;

Answer 4

您必须从旁边移除display:block并将宽度更改为300px，因为浮动元素是200px，因此它必须具有300px，因此它格式正确并且克服了重叠问题

或

您可以将宽度更改为自动：width:auto 在旁边 { 填充：5像素; 保证金右：30PX; 高度：200像素; 宽度：300像素; 向左飘浮; }

如何定位我的布局以将我的旁边放在我的部分旁边？

4 个答案: