Question

我正试图打包

<div class="social block"> ... </div>

似乎是并排的，就像一个网格。我也试图使它完全流畅，并自我调整（因此Bootstrap）。

我想要两个一共制作两行，每行有3个图标，所有图像都在两侧接触。

目前看起来像这样：http://postimg.org/image/z0g80wf0z/

这是我的CSS：

// Place all the styles related to the Pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
p{
color: rgb(51, 51, 51);
display: block;
font-family: Roboto, sans-serif;
font-size: 21px;
font-weight: 100;
height: 90px;
line-height: 30px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 30px;
text-align: center;}

p, h1 { margin: 0 }

html {
position:relative;
height:100%;
width:100%;
}
html,body
{
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
body {
position:absolute;
min-width:100%;
min-height:100%;
}

.window {
    height:700px;
    width:100%;

    //border-top: solid 1px #000; //temp test
}
.full{
    width:100%;

}

.main-home {
 background: url('http://i58.tinypic.com/2v34yub.jpg') no-repeat center center;
 background-size:cover;
}

.main-about {
    background: url('https://static.pexels.com/photos/1440/city-road-street-buildings.jpg') no-repeat center center;
    background-size:cover;

}

.window-support {
padding: 80px 0;
text-align: center;
}

.content {
    top:225px;
  position:relative;
  text-align: center;
  color: white;
}

h1.headline {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 50px;
}

h2.headline {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 35px;
}


.btn.sharp {
border-radius:0;
border:none;
font-size: 14px;
}

.menu-icon {
    top:30px;
    left:30px;
    position:absolute;
    margin: 0;

}

.col-centered{
    float: none;
    margin: 0 auto;
}

.halfBack {
    width: 50%;
    height:500px;

}

.grid-text {
    padding-top:205px;
}

.text-background {
    height: 2em;
    width: 100%;
    background-color:#000;
    line-height:2em;
    vertical-align:middle;
    text-align:center;
    opacity:0.7;
}

#footer {
    background-color: #f9f9f9;
    border-top: solid 1px #F5F5F5;
        height:50px;
    text-align: center;
        line-height:50px;
        vertical-align:middle;
    color: #ccc;
        position:absolute;
        bottom:-50px;
    width:100%;
}

#abt-grid-3 {
   background: url('https://paulkporterphotography.files.wordpress.com/2015/04/20141210-distillery-31.jpg') no-repeat center center;
   height:500px;
    background-size:cover;
    border: solid 2px #F5F5F5;
}

#abt-grid-1{
    background:url('https://i0.wp.com/upload.wikimedia.org/wikipedia/commons/1/14/1_yonge_street_toronto_winter_2010_panorama.jpg') no-repeat center center;
    height:500px;
    background-size:cover;
    border: solid 2px #F5F5F5;
}
#abt-grid-2{
    background: url('http://ryersonbuilds.ryerson.ca/wp-content/uploads/2013/12/X6C61871.jpg') no-repeat center center;
    height:500px;
    border: solid 2px #F5F5F5;
    background-size:cover;
}

#leftHalf {
   background: url(images/bg-1.jpg);
   width: 70%;
   position: absolute;
   left: 0px;
   height: 100%;
}
#rightHalf {
   background: url(images/bg-2.jpg);
   width: 30%;
   position: absolute;
   right: 0px;
   height: 100%;
}

.socialBlock{
    border: solid 1px #CCC;
    height: 300px;
    width:100%;
}

.edgeWrap {
    margin:0px;
    padding:0;
    width:100%;
}
.socialBlock {

    .row {border:solid 1px #000;}
    .col-md-4 {}
    .container{width:auto;}

}

这是html：

<!DOCTYPE html>
<html>

  <!-- start page -->
<div id="leftHalf" class="halfBack">
  <div class="window main-home">
     <div class="container edgeWrap">
          <!-- content -->
          <div class="row">
            <div class="content col-md-12">
              <h1 class="headfont text-center white" data-sr="flip 65deg over 2s" >Hi, I'm Satchel.</h1>
                    <p data-sr="flip 65deg over 2s"> <%= link_to 'About Me', '/about', class:'btn btn-primary sharp btn-lg', role:'button' %>
             <%= link_to 'The Blog', '/blog', class:'btn btn-primary sharp btn-lg', role:'button', target:'_blank' %>
              </p>

            </div>
          </div>
    </div>
  </div>
</div>

<div id = "rightHalf" class="halfBack">
  <div class="container edgeWrap">
    <div class="row">
      <div class="col-md-12">
        <div class="socialBlock">
          <div class="container">
          <div class="row">
            <div class="col-md-4"> <%= image_tag('icon/youtube-play.png',class:'img-responsive') %> </div>
            <div class="col-md-4"> <%= image_tag('icon/twitter.png', class:'img-responsive') %> </div>
            <div class="col-md-4"> <%= image_tag('icon/twitter.png', class:'img-responsive') %> </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>
</html>

这有点奇怪，因为我试图分裂（原来现在分别是3/10和7/10两半）。

感谢任何帮助！

Answer 1

Satchel 你好。
看看 Fiddle ，看看它是否对您有帮助。
我只是想简化一下，所以如果你想在这里运行Bootstrap方式。
您可以随时查看其工作原理，并将 col-xs-xx 替换为您自己的css。如果您不想使用Bootstrap。

你说你想要有两行，每行有3张图像都在接触我这样做了。

<div class="col-xs-3">
        <div class="row"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        </div>

        <div>
        <div class="row padtop">  
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        <img src="http://www.freelargeimages.com/wp-content/uploads/2015/05/Twitter_Logo_Hd_Png_03.png" class="col-xs-4 no-pad-marg"> 
        </div>
        </div>
    </div>

Boostrap并排网格，在固定空间

1 个答案: