Question

我正在尝试在div中保留文本并将图像放在右边。我在Stackoverflow中找到了许多示例，其中图像保留并且文本正确，然后我尝试切换它们但无法使其工作。我发现that on 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;
}

我的目标是this（抱歉无法发布图片我没有足够的声誉）。我希望文本左侧是边框div和右侧图片

Answer 1

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

删除以下css。现在没有必要。

.right-picture{
    float: right;
}

<强> Working Fiddle

修改

如果不需要静态宽度和高度，请从height中移除静态section，从width移除静态.main-topic将使结果更好。

来自width: 1541px;的{{1}}和来自.main-topic的{{1}}

<强> Updated Fiddle

Answer 2

从img中删除float：右移并将float：left放在.left-text

中

＆＃13;

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;
}

＆＃13;

	<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>

＆＃13;

Answer 3

这个怎么样：http://jsbin.com/yenuxajode

只需将宽度为50％（或任何你想要的）的文本div浮动，然后将图像div与剩余宽度一起浮动。使img具有最大宽度：100％;把它全部放在页面上。

Answer 4

请尝试这个，我认为这将是有效的

＆＃13;

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: 1102px;
	margin: 0 auto;
	clear: both;
}

.left-text{
	vertical-align:middle;
  float:left;
}

.right-picture{

}

.right-picture > img{
	display: block;
}

.clear{
	clear: both;
}

＆＃13;

<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>

＆＃13;

Answer 5

我updated your fiddle，删除了一些高度/宽度设置并调整了以下CSS规则，所以现在它看起来不错

.main-topic {
    display: table;
    border: 2px solid green;
    margin: 0 auto;
}

.left-text{
    display: table-cell;
    vertical-align:middle;
}

.right-picture{
    display: table-cell;
}

文字左侧和图像右侧

5 个答案: