左边是文字，右边是图片

Question

我正在尝试在 div 中使文本左侧和图像右侧。我在 Stackoverflow 中发现了很多示例，其中图像在左，文本在右，然后我尝试切换它们但无法使其工作。我 在 stackoverflow 上 发现了这一点，但对我来说没有意义。

我试过这个 JSFIDDLE ，但你会发现它不起作用。

 .main-topic {
    border: 2px solid green;
    width: 1541px;
    margin: 0 auto;
    clear: both;
}

.left-text{
    vertical-align:middle;
}

.right-picture{
    float: right;
}

.right-picture > img{
    display: block;
}

.clear{
    clear: both;
}

我的目标是 这个（抱歉不能张贴图片我没有足够的声誉）。我希望文本位于带边框的 div 的左侧，图片位于右侧

原文由 Levan Tsivadze 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将 display: flex; 添加到 .main-topic 即可。

并删除以下 css。现在不需要了。

 .right-picture{
    float: right;
}

工作小提琴

编辑：

If don’t required static width and height then, remove static height from section and static width from .main-topic will make result better.

这是 width: 1541px; 来自 .main-topic 和 height: 500px; 来自 section

更新小提琴

原文由 ketan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

从 img 中删除 float:right 并将 float: left 放入 .left-text

 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul.topnav {
	list-style-type: none;
	/*position: fixed; */
	overflow: hidden;
	margin: 0;
	padding: 0 0 0 400px;
	background-color: #110E0C;
   /*width: 100%;
   top: 0; */
}

ul.topnav li {
	float: left;
}

ul.topnav li a {
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 14px 30px;
	text-transform: uppercase;
	/*background-color: #3F4345;*/
}

ul.topnav li a:hover {
	background-color: #C8D0D7;
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
}

ul.topnav li a.active {
	background-color: #C8D0D7;
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
}

header {
	width: 100%;
	padding: 2px;
	color:black;
	background-color: #C8D0D7;
	text-align: center;
	overflow: hidden;
}

header img {

	height: 150px;
	width: 150px;
	margin-left: 900px;
	float:left;

}
header p {
	padding: 40px;
}

section {
	background-color: #333333;
	height: 500px;
}

section img {
	border: 1px solid white;
	height: 400px;
	width: 500px;
}

section h3 {
	color: white;
}

section p {
	color: white;
	height: 170px;
	width: 600px;
	padding: 0;
	margin: 0;
	line-height: 20px;
	vertical-align: top;
}

.main-topic {
	border: 2px solid green;
	width: 1541px;
	margin: 0 auto;
	clear: both;
}

.left-text{
	vertical-align:middle;
  float:left;
}

.right-picture{

}

.right-picture > img{
	display: block;
}

.clear{
	clear: both;
}

 	<section>
		<div class="main-topic">
			<div class="left-text">
				<h3>Deadpool Fans Petition 'SNL' for Superhero to Host</h3>
				<p>
					Deadpool fans want its superhero to host Saturday Night Live — Deadpool, that is, not Ryan Reynolds. Fans of the Merc With a Mouth, who led the Marvel film to a history-making debut at the box office, have launched a Change.org petition calling for the antihero to host an upcoming episode of the NBC sketch comedy show. "We've all seen the trailers, the magazine covers, the viral videos, and the billboards by now, so what's left for Deadpool (Ryan Reynolds) to do?" creator Andrew Stege asks in the petition, which is directed to SNL, creator Lorne Michaels, parent.
				</p>
			</div>
			<div class="right-picture">
				<img src="http://cdn3.whatculture.com/wp-content/uploads/2015/10/f5S3dvUb.jpg">
			</div>
			<div class="clear"></div>
		<div>
	</section>

原文由 silviagreen 发布，翻译遵循 CC BY-SA 3.0 许可协议