Question

参考以下HTML，有四个DIV容器，每个容器包含一个图像，heading-element，paragraph-element和一个链接。当页面在全尺寸计算机显示器上打开时，我希望三个div在屏幕上并排排列。

到目前为止，它们只是在屏幕上垂直堆叠。

<div class="threeSpread">
    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="inner">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>
</div>

CSS

div {
    display: block;
}

.threeSpread {
    margin: 0 40px 40px 40px;
}

div.inner, div.outer {
    max-width: 30%;
}

@media (max-width: 568px) {
     .outer img {
          float: left;
          margin-right: 5px;
     }

     .inner img {
          float: right;
          margin-right: 5px;
     }

     h2 { 
         margin-top: 50px
     }
}

Answer 1

制作display:inline-block;

div {
    display: inline-block;
}

工作示例：http://codepen.io/anon/pen/GZrNQe

否则，

div {
    display: inline-block;
}



.threeSpread {

margin: 0 40px 40px 40px


}

div.inner, div.outer {
    max-width: 30%;
}



@media (max-width: 568px) {

    .outer img { float: left;
          margin-right: 5px;}

    .inner img (float: right;
            margin-right: 5px;
            )

    h2 {margin-top: 50px}


}

 <html>
<head>
<link rel="stylesheet" href="new.css" type="text/css" charset="utf-8">
</head>
<body>

<div class="threeSpread">
    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="inner">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>


</div>

    </body>

根据learnlayout.com，

您可以创建一个填充浏览器宽度和包装的框网格很好。这可以使用float很长一段时间，但现在使用inline-block它会更容易。 inline-block元素就像内联元素，但它们可以有width和height。

Answer 2

将div类的显示键更改为

setwd('/data/') temp = list.files(pattern="*.csv") for(i in seq(from=1, to=168, by=24)){ for(j in 0:23){ # can add other csv options in the read.csv hour <- read.csv(temp[i+j],header=FALSE) # if first hour of a day, start new dataframe, else combine with previous hour if(j==0) daydf <- hour else daydf <- rbind(daydf, hour) } assign(paste0("df_",i), daydf) print(paste("Creating dataframe:",paste0("df_",i))) }

查看这个 http://www.w3schools.com/css/css_inline-block.asp

如何将DIV排成一行

2 个答案: