左文右图

Question

左文右图

7

我想把文字放在左边，图片放在右边。我在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

4个回答

1

将img的float:right删除，并在.left-text中添加float:left

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

谢谢，但是图片和div边框之间有空格。 - Levan Tsivadze

0

这样怎么样：http://jsbin.com/yenuxajode 只需将文本 div 左浮动，宽度为 50%（或任何您想要的宽度），并将图像 div 右浮动，剩余宽度即可。使 img 具有 max-width:100％; 以保持其全部在页面上。

- Joey M-H

0

我更新了你的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;
}

- Asons

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ketan · Accepted Answer

只需在 .main-topic 中添加 display: flex; 即可解决问题。

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

.right-picture{
    float: right;
}

演示代码

编辑:

如果不需要静态宽度和高度，则从

中删除静态height，从.main-topic中删除静态width会使结果更好。

这是.main-topic的宽度为1541px; 和section的高度为500px;

更新的演示代码