浮動写真、テキスト、表（HTML/CSS）

ここではいくつかの答えを確認しましたが、本当に助けてくれた人はいませんでした。あなたが理解することを望む:)。私は次のようなレイアウトを作りたい：私はそれが理解できる願っています浮動写真、テキスト、表（HTML/CSS）

table header text - picture 

      text - picture 
t a b  l  e

：

text - picture 

text - picture 

    table

は今のところ、私は次のようなレイアウトを得ることができました。教師のサーバーにアップロードされているため、ページへのリンクを実際に提供することはできません。

これは私がこれまで持っているコードです：画像用

HTML（私は、テーブルには、する必要があるとは思わない）：次に

<div id="content"> 

      <div class="minahundarimg1"> 
       <a target="_blank" href="Nino1.jpg"> 
       <img src="Nino1.jpg" alt="Nino" width="300" height="200" > 
       </a> 
       <div class="desc">Nino, 2 &aringr </div> 
      </div> 

      <div class="minahundarimg2"> 
       <a target="_blank" href="DSC_0015.JPG"> 
       <img src="DSC_0015.JPG" alt="Marcus" width="300" height="200" > 
       </a> 
       <div class="desc">Marcus, 4 &aringr </div> 
      </div> 

      <p>

画像のためのCSSを：テーブルの

div.minahundarimg1{ 
    float: right; 
    margin: 5px; 
    padding: 5px; 
    padding-bottom: 10px; 
} 
div.minahundarimg2 { 
    float: right; 
     margin: 5px; 
     padding: 5px; 
     padding-bottom: 10px; 
} 
div.desc { 
    float: left; 
    margin: 25px; 
    padding: 25px; 
}

とCSS（場合にはそれが必要です）：

table, td, th { 
    border: 1px solid #ddd; 
    text-align: left; 
} 

table { 
    border-collapse: collapse; 
    width: 100%; 

} 

th, td { 
    padding: 15px; 
}

テーブルが<div id="text2">というdiv内にあります。これがそのCSSです。

div#text2 { 
    margin: 10px; 
    padding: 10px; 
}

誰かが私の問題を解決するのを助けたり、正しい方向に向いてくれたら、本当にうれしいです。また、質問に問題がある場合は、お気軽にお問い合わせください。ありがとうございます:)

出典

2016-10-13 MrBlubbintosh

すでに行ったことの印刷画面を追加できますか？ –

多分このようにしますか？ https://jsfiddle.net/atqjbjzk/2/

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<style type="text/css"> 
    div.minahundarimg1{ 
    margin: 5px; 
    padding: 5px; 
    padding-bottom: 10px; 
} 
div.minahundarimg2 { 
    margin: 5px; 
    padding: 5px; 
    padding-bottom: 10px; 
} 
div.desc { 
    margin: 25px; 
    padding: 25px; 
    display: inline-block; 
} 

table, td, th { 
    border: 1px solid #ddd; 
    text-align: left; 
} 

table { 
    border-collapse: collapse; 
    width: 100%; 

} 

th, td { 
    padding: 15px; 
} 

div#text2 { 
    margin: 10px; 
    padding: 10px; 
} 
</style> 
<body> 
<div id="content"> 
    <div class="minahundarimg1"> 
     <div class="desc">Nino, 2 &aringr </div> 
     <a target="_blank" href="Nino1.jpg"> 
      <img src="Nino1.jpg" alt="Nino" width="300" height="200" > 
     </a> 
    </div> 
    <div class="minahundarimg2"> 
     <div class="desc">Marcus, 4 &aringr </div> 
     <a target="_blank" href="DSC_0015.JPG"> 
      <img src="DSC_0015.JPG" alt="Marcus" width="300" height="200" > 
     </a> 
    </div> 
    <table> 
     <tr> 
     <td>T</td> 
     <td>A</td> 
     <td>B</td> 
     <td>L</td> 
     <td>E</td> 
     </tr> 
    </table> 
    </table> 
</div> 
</body> 
</html>

出典

2016-10-13 13:17:53

ありがとう、それは助け:)！ – MrBlubbintosh

あなたは
のようなテーブルを含むdiv要素にCSSクラスのテキスト・センターを適用することができます....
abouve doesnotそのdivの @media(min-width:500px){ div#text2 { margin-left: 30px; } }のメディアクエリを使用してみてください、その後、作業している場合

出典

2016-10-13 13:11:46

浮動写真、テキスト、表（HTML/CSS）

答えて

関連する問題