如何让两个不同的元素并排显示？答案

【问题标题】：How to have two different elements display side by side?如何让两个不同的元素并排显示？
【发布时间】：2016-12-10 01:47:41
【问题描述】：

如何才能让两个不同的元素并排显示？我的意思的图片：http://prntscr.com/c1e8pn 我正在尝试做的图片：http://prntscr.com/c1e8v2

【问题讨论】：

标签： html css

【解决方案1】：

试试这个 sn-p。

注意：请在大屏幕上观看

.content{
			width: 79%;
			float:left;
			padding: 5px;
		}
		.sidebar{
			width: 19%;
			float:left;
			padding: 5px;			
		}
		.new{
			background-color: orange;
			margin:10px;
			padding: 15px;
			border-radius: 4px;
			color: #fff;
		}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>	
	<div class="content">
		<div class="new">
			<h2>Facebook</h2>
			<p>Facebook is a for-profit corporation and online social networking service based in Menlo Park, California, United States.</p>
		</div>
		<div class="new">
			<h2>Twitter</h2>
			<p>Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets". Registered users can read and post tweets, but those who are unregistered can only read them.</p>
		</div>
		<div class="new">
			<h2>LinkedIn</h2>
			<p>LinkedIn is a business-oriented social networking service. Founded on December 14, 2002, and launched on May 5, 2003, it is mainly used for professional networking.</p>
		</div>
	</div>
	<div class="sidebar">
		<div class="new">
			<h2>Google</h2>
			<p>Google is an American multinational technology company specializing in Internet-related services and products that include online advertising technologies, search, cloud computing, and software</p>
		</div>
		<div class="new">
			<h2>Yahoo</h2>
			<p>Yahoo Inc. is an American multinational technology company headquartered in Sunnyvale, California. It is globally known for its Web portal, search engine Yahoo! Search, and related services, including Yahoo! Directory, Yahoo! Mail, Yahoo!</p>
		</div>
	</div>
</body>
</html>

【讨论】：

【解决方案2】：

我不完全确定您在问什么，但我相信您缺少的标签是 display: inline-block; 标签。它允许您设置元素的宽度和高度并在同一行中。

这是您的代码示例。

.main-content{
  display: inline-block;
  width: 68%;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #DDD;
}

.content{
  width: 60%;
  padding: 1%;
  margin: 1% 1% 1% 0;
  background-color: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  float: left;
}

.side-box{
  display: inline-block;
  width: 22%;
  float: right;
  background-color: #EEE;
}

<div class="main-content">
  <article class="content">
    <header class="main-header">
      <h1>NEW! Free Stuff Section!</h1>
    </header>
    <footer class="sub-footer">
      <p>We have added a new free stuff section!</p>
    </footer>
    <content>
      <p>bla bla bla bla bla bla bla bla bla</p>
    </content>
  </article>
</div>
<aside class="side-box">
  <article>
    <h1>Side Box Header</h1>
    <p>Side Box Text</p>
  </article>
</aside>

希望这会有所帮助！

【讨论】：