如何让两个不同的元素并排显示？
Posted
技术标签:
【中文标题】如何让两个不同的元素并排显示？【英文标题】：How to have two different elements display side by side? 【发布时间】：2016-12-10 01:47:41 【问题描述】：如何才能让两个不同的元素并排显示？ 我的意思的图片：http://prntscr.com/c1e8pn 我正在尝试做的图片：http://prntscr.com/c1e8v2
【问题讨论】：
【参考方案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>希望这会有所帮助！
【讨论】：
以上是关于如何让两个不同的元素并排显示？的主要内容，如果未能解决你的问题，请参考以下文章