Question

所以我在这里检查了几个不同的答案，但没有一个真正帮助过我，所以这次我特意要求我。希望你能理解：）。我想做以下布局：

text - picture

text - picture

    table

现在，我已设法获得以下布局：

table header text - picture

             text - picture
t   a    b      l       e

我希望这是可以理解的。无法真正提供指向该网页的链接，因为它已上传到教师的服务器。

这是我到目前为止所获得的代码：

图片的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;
}

如果有人能帮助我解决问题或指出正确的方向，我会很高兴。另外，如果我的问题有任何问题，请不要犹豫。提前谢谢你:)。

Answer 1

也许这样？ 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>

Answer 2

您可以将css class text-center应用于包含
这样的表的div ....
如果abouve不起作用，请尝试使用该div的媒体查询 @media(min-width:500px){ div#text2 { margin-left: 30px; } }

浮动图片，文字和表格（HTML / CSS）

2 个答案: