ブートストラップ3のスタックイメージが同じ行にある

イメージをすべてのテキストの上に重ねて、同じ行にイメージをいくつかのテキストでスタックしようとしています。ブートストラップ3のスタックイメージが同じ行にある

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <!-- jquery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
    <!-- jquery ui --> 
 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
    <!-- bootstrap --> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td rowspan='6'> 
 
      <img src="http://www.google.com/search?q=professor&rlz=1C5CHFA_enUS699US707&espv=2&biw=1280&bih=703&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiUn_nPgJ3QAhUO7WMKHZjDD_oQ_AUIBigB#imgrc=MR0mBgD1-8vtJM%3A" height='170' width='170' style='padding-left: 30px;'/> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Bob</td> 
 
     </tr> 
 
     <tr><td>[email protected]</td></tr> 
 
     <tr><td>23</td></tr> 
 
     <tr><td>Contact</td></tr> 
 
     <tr><td>Party</td></tr> 
 
     <tr><th>Start Term</th><td>2016.01.01</td></tr> 
 
     <tr><th>End Term</th><td>2016.01.01</td></tr> 
 
     <tr><th>Term</th><td>today</td></tr> 
 
     <tr><th>Office</th><td>here</td></tr> 
 
     <tr><th>State</th><td>CA</td></tr> 
 
     <tr><th>Fax</th><td>here</td></tr> 
 
     <tr><th>Birthday</th><td>today</td></tr> 
 
     <tr><th>Social Links</th><td>here</td></tr> 
 
    </tbody> 
 
    </table> 
 
    </body> 
 

 
</html>

でのアクションで私のコードを参照してください：トリッキーな部分はイメージです https://plnkr.co/edit/YgcNPhX8hc4HnNgZALBr?p=preview

行である：ウィッヒを1つに6つのTDSを取り、私が欲しいですbootstrap3を使用してすべての上にスタックします。後

：：前

：

私が話しているかを確認するピクチャを参照してください

あなたに事前にみんなに感謝！

出典

2016-11-10 DawnZHANG

すべてのトップを定義する！ - ページの上に？テーブルの上に？行の上に？ - サイドノート：表形式のデータには 'table's、レイアウトには' div'を使用してください – ochi

BSを使いたいですか？それを行う。 rowspanを削除し、col-xs-6程度を置いてください。 –

要件に応じてプランナーリンクを編集しました。私はプランナーのアカウントを持っていないので、私のコードはリンクに保存されません。参考のためのコードは次のとおりです。

<!DOCTYPE html> 
<html> 
<style type = "text/css"> 

    table{ 
    width:100%; 
    height:100%; 
    align:center; 
    text-align:center; 
    } 

    img{ 
    align:center; 
    background-size:cover; 
    } 

    tbody{ 
    align:left; 
    text-align:left; 
    } 

</style> 
    <head> 
    <!-- jquery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

    <!-- jquery ui --> 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

    <!-- bootstrap --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <table> 
    <thead> 
     <tr> 
     <td> 
      <img src="http://www.google.com/search?q=professor&rlz=1C5CHFA_enUS699US707&espv=2&biw=1280&bih=703&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiUn_nPgJ3QAhUO7WMKHZjDD_oQ_AUIBigB#imgrc=MR0mBgD1-8vtJM%3A" height='170' width='170' style='padding-left: 30px;'/> 
     </td> 
     </tr> 
     <tr><td>Bob</td></tr> 
     <tr><td>[email protected]</td></tr> 
     <tr><td>23</td></tr> 
     <tr><td>Contact</td></tr> 
     <tr><td>Party</td></tr> 
     </thead> 
     <tbody> 
     <tr><th>Start Term</th><td>2016.01.01</td></tr> 
     <tr><th>End Term</th><td>2016.01.01</td></tr> 
     <tr><th>Term</th><td>today</td></tr> 
     <tr><th>Office</th><td>here</td></tr> 
     <tr><th>State</th><td>CA</td></tr> 
     <tr><th>Fax</th><td>here</td></tr> 
     <tr><th>Birthday</th><td>today</td></tr> 
     <tr><th>Social Links</th><td>here</td></tr> 
    </tbody> 
    </table> 
    </body> 

</html>

効果を得るためにCSSスタイルセレクターが追加されました。 img tdのrowspan属性も削除されました。画像から目的の効果を得るには、6 tdは必要ありません。 tdを1列に配置し、background-size:coverプロパティを適用して、イメージを行に比例して伸ばすことができます。

出典

2016-11-10 13:50:44 Fabulous

私は上記のあなたのテーブルで何が起こっているのかわかりませんが、それはまったくブートストラップではありません。それにもかかわらず、ここであなたはそれが最も単純な形式だで、このレイアウトを実装するために必要なものです：

https://plnkr.co/edit/yK4MSDMA63P1n0roSgAW?p=preview

HTMLは次のようになります。本質的に2行のコンテンツです。最初の行は2つのdivに分割されています。両方とも、ブラウザのビューポートが小さいときは12（全幅）のグリッドの場所をとり、中程度以上の場合は6です（これはcol-md-6のクラスです）。 2行目には、col-xs-12という列のdivがあります。つまり、最小の（電話）サイズでも最大幅を占めることになります。それはあなたを始めるはずです。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6"> 
     <img src="http://c7.nrostatic.com/sites/default/files/uploaded/donald-trump-bankruptcy-lies-r.jpg" style="width:200px; height:200px;"/></div> 
    <div class="col-md-6"><p>Bacon ipsum dolor amet pancetta jowl filet mignon capicola ball tip jerky. Capicola t-bone filet mignon ball tip pork loin beef ribs bresaola pancetta shank biltong andouille porchetta ham hock short loin pastrami. Meatball frankfurter leberkas tenderloin brisket sausage salami ribeye ham ham hock andouille rump venison bacon. Drumstick tri-tip shoulder pork chop kielbasa tenderloin sausage prosciutto short ribs frankfurter hamburger t-bone chuck. Turducken pig meatloaf, meatball swine short ribs t-bone jerky. Strip steak cow boudin, sirloin leberkas pork chop frankfurter t-bone jowl rump tri-tip alcatra. Prosciutto meatball salami picanha pig.</p></div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12"> 
     <p>Bacon ipsum dolor amet pancetta jowl filet mignon capicola ball tip jerky. Capicola t-bone filet mignon ball tip pork loin beef ribs bresaola pancetta shank biltong andouille porchetta ham hock short loin pastrami. Meatball frankfurter leberkas tenderloin brisket sausage salami ribeye ham ham hock andouille rump venison bacon. Drumstick tri-tip shoulder pork chop kielbasa tenderloin sausage prosciutto short ribs frankfurter hamburger t-bone chuck. Turducken pig meatloaf, meatball swine short ribs t-bone jerky. Strip steak cow boudin, sirloin leberkas pork chop frankfurter t-bone jowl rump tri-tip alcatra. Prosciutto meatball salami picanha pig.</p> 
    </div> 
    </div> 
</div>

出典

2016-11-10 02:19:16

私は自分のブートストラップコードを持っていない理由は、私はそれらのコードを持っていたときに、私はiPhoneで必要な反応行動を得るが、それはデスクトップ上の元のレイアウトを維持することに失敗したためです。 – DawnZHANG

@DawnZHANGまあ、私はあなたが欲しいものがわからない。上のコードは画像に必要なものです。スタックするウィンドウのサイズを変更する場合は、 'col'クラスを変更することができます。 'col-sm-6'は一番上の行をより小さなサイズに分割し、' col-lg-6'はそれを早くスタックにします。がんばろう。 –

ブートストラップ3のスタックイメージが同じ行にある

答えて

関連する問題