CSS整列

I持って次のスニペットCSS整列

.striped { 
 
\t height : 30px; \t 
 
\t margin-right: 1px !important; 
 
    background: repeating-linear-gradient(-45deg,#E4003D,#E4003D 10px,#222 10px,#222 20px)!important; 
 
} 
 
.content{ 
 
\t height : 100%; 
 
} 
 
\t 
 
.mymedia {  
 
    font-size: 1.5vh !important; 
 
    color: #fff; 
 
    text-align: justify; 
 
    -ms-text-justify: inter-word; 
 
    text-justify: inter-word; 
 
    border-color: #E4003D; 
 
    font-weight: normal !important; 
 
\t background-color:#363636 !important; 
 
    background: repeating-linear-gradient(-45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;  
 
} 
 

 
.rightpadding{ 
 
\t margin-right: 1px !important; 
 
} 
 
.top-buffer { 
 
    margin-top:13px; 
 
    overflow: hidden; 
 
\t 
 
} 
 

 
.bottom { 
 
    vertical-align: bottom; 
 
    bottom: 0 !important; 
 
} 
 

 
.nolrpadding{ 
 
\t padding-left: 0 !important; 
 
\t padding-right: 0 !important; 
 
} 
 
    
 
.mymedia > p { 
 
\t margin-left: 5vw !important; 
 
\t margin-right: 5vw !important; \t 
 
} 
 

 
* { 
 
    -webkit-border-radius: 0 !important; 
 
    -moz-border-radius: 0 !important; 
 
      border-radius: 0 !important; 
 
} 
 

 

 
.square-box{ 
 
    position: relative; 
 
    width: 95%; 
 
    overflow: hidden;  
 
    font-size: 2vh !important; 
 
    font-weight: bold !important; 
 
\t background: repeating-linear-gradient(-45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important; 
 
} 
 
.square-box:before{ 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 
.square-content{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    color: white; 
 
} 
 
.square-content div { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.square-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    color: white;  
 
} 
 

 
.noRightMargin { 
 
    margin-right: 0 !important; 
 
} 
 

 
.noLeftMargin { 
 
    margin-left: 0 !important; 
 
} 
 
.row [class*="col-"]{ 
 
    margin-bottom: -99999px; 
 
    padding-bottom: 99999px; 
 
} 
 

 
.row{ 
 
    overflow: hidden; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <link rel="stylesheet" type="text/css" href="css/main.css" />  
 
    
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
    
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="row" style="margin-top:5%; margin-bottom: 10px;"> 
 
    
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-5"> \t 
 
    \t <!-- <div class="row rightpadding"> --> 
 
\t <div class="row striped"></div> \t 
 
\t <div class="row rightpadding"> 
 
     <div class="media mymedia"> 
 
      <img src="images/Mission/cluster.png" class="img-responsive"> 
 
      <p>   
 
\t \t asas 
 
      </p> \t \t \t \t 
 
     </div> 
 
\t </div> 
 
\t <div class="row striped bottom"></div> 
 
    \t <!-- </div> --> 
 
    \t 
 
    </div> 
 
    <div class="col-xs-7"> 
 
     <div class="row noRightMargin"> 
 
     <div class="col-xs-4 nolrpadding"> 
 
      <div class='square-box'> 
 
      <a href="http://sky.esa.int/" data-internal="false"> 
 
       <div class="square-content"><div><span>xxx</span></div></div></a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-4 nolrpadding"> 
 
      <div class='square-box'> 
 
      <a href="https://twitter.com/ESAscience" data-internal="false"> 
 
       <div class="square-content"><div><span>xxx</span></div></div></a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-4 nolrpadding"> 
 
      <div class='square-box'> 
 
      <a href="#" data-internal="false"> 
 
       <div class="square-content"><div><span>xxx</span></div></div></a> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
     <div class="row top-buffer noRightMargin"> 
 
     <div class="col-xs-4 nolrpadding"> 
 
      <div class='square-box'> 
 
      <a href="http://helioviewer.org/" data-internal="true"> 
 
       <div class="square-content"><div><span>xxx</span></div></div></a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-4 nolrpadding"> 
 
      <div class='square-box'> 
 
      <a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py"> 
 
       <div class="square-content"><div><span>xxx</span></div></div></a> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    <!-- <div class="col-xs-3"></div> --> 
 
    </div> 
 
</div> 
 

 

 
</html>

Iは画像に示すように、2列の下部のアラインメントである持っている問題

縦型縦列の修正がありましたが、nここで作業するので、最初の列の3つの行の一番下を次の列に揃えるにはどうしたらいいですか？

es。

UPDATE

私はそれが下のストリップ列が縦に赤いボックスの底部と整列しているとこのようになりたいと思います。

出典

2016-06-28 Goozo

あなたは、2行目の2つの項目を中央に求めていますか？あなたが探しているもののスクリーンショットを偽造できますか？ –

下の縞模様の行の下端を赤いボックスの下端に垂直に揃えたい場合は、 – Goozo

を参照してください。残念ながら、あなたの例はどちらのスクリーンショットにも近くありません。最初のイメージのように見えるように修正すれば、誰かが助けてくれるかもしれません。 – beercohol

はあなたがほんの少しJQと望んでいた何をするために管理しているためにチャイルズを設定します。あなたがここに

チェックを気にしないことを望むjsfiddle

CSSコードを追加：.mymedia { height:100%;}

JQコードを追加：の

var result = $(".col-xs-7").height() - $(".row.striped").height()*2 
$(".row.rightpadding").height(result)

結果=高さをright col - 両方のストリップの高さそれが助けなら、私に知らせて

（.row.rightpadding）その後、中央の列にその高さを追加します（私は推測等しい）行

エド。

出典

2016-06-28 15:13:35

<div>でのラップすべて、およびmin-height: 100%

出典

2016-06-28 14:17:17 OverCoder

左上の列要素が行の高さに「スナップ」するように、上部と下部が固定された絶対配置を使用することで、必要なものを実現できるはずです。

次のスニペットを試してください。

.striped { 
 
    height: 30px; 
 
    background: repeating-linear-gradient(-45deg, #E4003D, #E4003D 10px, #222 10px, #222 20px)!important; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 15px; 
 
} 
 
.content { 
 
    height: 100%; 
 
} 
 
.mymedia { 
 
    font-size: 1.5vh !important; 
 
    color: #fff; 
 
    text-align: justify; 
 
    -ms-text-justify: inter-word; 
 
    text-justify: inter-word; 
 
    border-color: #E4003D; 
 
    font-weight: normal !important; 
 
    background-color: #363636 !important; 
 
    background: repeating-linear-gradient(-45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important; 
 
    top: 30px; 
 
    bottom: 30px; 
 
    left: 0; 
 
    right: 15px; 
 
    position: absolute; 
 
    margin-top: 0 !important; 
 
} 
 
.top-buffer { 
 
    margin-top: 13px; 
 
    overflow: hidden; 
 
} 
 
.bottom { 
 
    bottom: 0 !important; 
 
} 
 
.nolrpadding { 
 
    padding-left: 0 !important; 
 
    padding-right: 0 !important; 
 
} 
 
.mymedia > p { 
 
    margin-left: 5vw !important; 
 
    margin-right: 5vw !important; 
 
} 
 
* { 
 
    -webkit-border-radius: 0 !important; 
 
    -moz-border-radius: 0 !important; 
 
    border-radius: 0 !important; 
 
} 
 
.square-box { 
 
    position: relative; 
 
    width: 95%; 
 
    overflow: hidden; 
 
    font-size: 2vh !important; 
 
    font-weight: bold !important; 
 
    background: repeating-linear-gradient(-45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important; 
 
} 
 
.square-box:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 
.square-content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    color: white; 
 
} 
 
.square-content div { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.square-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    color: white; 
 
} 
 
.noRightMargin { 
 
    margin-right: 0 !important; 
 
} 
 
.noLeftMargin { 
 
    margin-left: 0 !important; 
 
} 
 
.row { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.myLeftCol { 
 
    bottom: 0; 
 
    padding-left: 0 !important; 
 
    position: absolute !important; 
 
    top: 0; 
 
} 
 
.myRightCol { 
 
    margin-left: 41.6667%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
<meta charset="utf-8" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<title></title> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<link rel="stylesheet" type="text/css" href="css/main.css" /> 
 

 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
</head> 
 

 
<body> 
 

 
<div class="container"> 
 
    <div class="row" style="margin-top:5%; margin-bottom: 10px;"> 
 

 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-5 myLeftCol"> 
 
      <div class="striped"></div> 
 
      <div class="media mymedia"> 
 
       <img src="images/Mission/cluster.png" class="img-responsive"> 
 
       <p> 
 
        asas 
 
       </p> 
 
      </div> 
 
      <div class="striped bottom"></div> 
 
     </div> 
 

 
     <div class="col-xs-7 myRightCol"> 
 
      <div class="row noRightMargin"> 
 
       <div class="col-xs-4 nolrpadding"> 
 
        <div class='square-box'> 
 
         <a href="http://sky.esa.int/" data-internal="false"> 
 
          <div class="square-content"> 
 
           <div><span>xxx</span> 
 
           </div> 
 
          </div> 
 
         </a> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-xs-4 nolrpadding"> 
 
        <div class='square-box'> 
 
         <a href="https://twitter.com/ESAscience" data-internal="false"> 
 
          <div class="square-content"> 
 
           <div><span>xxx</span> 
 
           </div> 
 
          </div> 
 
         </a> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-xs-4 nolrpadding"> 
 
        <div class='square-box'> 
 
         <a href="#" data-internal="false"> 
 
          <div class="square-content"> 
 
           <div><span>xxx</span> 
 
           </div> 
 
          </div> 
 
         </a> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 
      <div class="row top-buffer noRightMargin"> 
 
       <div class="col-xs-4 nolrpadding"> 
 
        <div class='square-box'> 
 
         <a href="http://helioviewer.org/" data-internal="true"> 
 
          <div class="square-content"> 
 
           <div><span>xxx</span> 
 
           </div> 
 
          </div> 
 
         </a> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-xs-4 nolrpadding"> 
 
        <div class='square-box'> 
 
         <a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py"> 
 
          <div class="square-content"> 
 
           <div><span>xxx</span> 
 
           </div> 
 
          </div> 
 
         </a> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 
     </div> 
 
     <!-- <div class="col-xs-3"></div> --> 
 
    </div> 
 
</div> 
 

 

 
</html>

出典

2016-06-28 16:14:37 beercohol

何らかの理由でCSSが私のためには機能しませんでしたが、htmlの構造を変更してすべての入れ子になった行を削除しました。 – Goozo

答えて

関連する問題