CSS 不起作用，DOM 结构来自 HTML

Question

.empty-space{
    width: 30%;
    float: left;
}

.download-information{
    width: 70%;
    float: left;
}

.download-thumbnail img {
    height: 30px;
    width: 30px;
    float: left;
}

.download-profile{
    float: left;
}

<div class="download-content">
    <div class="download-information">
        <div class="empty-space"></div>
        <div class="information">
            <div class="download-thumbnail"><img src="https://media.istockphoto.com/photos/cloud-computing-picture-id1087885966" alt="Sample image"></div>
            <div class="download-profile">
                <b><div class="img-title">Demo title</div></b>
                <div class="img-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
            </div>
        </div>
    </div>
    <div class="download-link-content">
        <div class="download-link-content">
            <div class="download-icon"><i class="fas fa-download"></i></div>
            <div class="link-to-download"><a href="#">Download</a></div>
            <div class="download-link-information">
                <span>(
                    <span class="download-filesize">3,2 MB,</span>
                    <span class="download-filestype">PDF</span>
                    )
                </span>
            </div>
        </div>
        <div class="empty-space"></div>
    </div>
</div>

我有以下模型，我现在正在尝试建模。

我想到了下面的HTML框架和关联CSS：

<div class="download-content">
    <div class="download-information">
        <div class="empty-space"></div>
        <div class="information">
            <div class="download-thumbnail"></div>
            <div class="download-profile">
                <b><div class="img-title"></div></b>
                <div class="img-description"></div>
            </div>
        </div>
    </div>
    <div class="download-link-content">
        <div class="download-link-content">
            <div class="download-icon"><i class="fas fa-download"></i></div>
            <div class="link-to-download"></div>
            <div class="download-link-information">
                <span>(
                    <span class="download-filesize">,</span>
                    <span class="download-filestype"></span>
                    )
                </span>
            </div>
        </div>
        <div class="empty-space"></div>
    </div>
</div>

.empty-space{
    width: 30%;
    float: left;
}

.download-information{
    width: 70%;
    float: left;
}

.download-thumbnail {
    height: 30px;
    width: 30px;
    float: left;
}

.download-profile{
    float: left;
}

不幸的是，它不起作用，前端根本不是我的强项，不幸的是，我不知道有谁可以在这里帮助我如何去做。有人可以帮我看看它应该是什么样子，或者我应该如何设计 CSS?

加1： HTML DOM 我的想法是错误的还是可以实现这个以便图像也可以正确显示

加2：将片段添加到我的 post。我不明白。这只是一个私人项目，但没有获得前端样式。

Answer 1

看起来 CSS 网格属性会在这里有所帮助，因为它会计算出项目之间要留出多少 space，因此您无需担心浮点数或空 space div.

这里有一个片段可以帮助您入门。显然，您需要查看每个部分所需的确切比例。例如，您可能还需要媒体查询，以便窄设备使用屏幕的整个宽度。

您还可以检查您的 HTML 结构，因为从网格的角度考虑它，也许可以简化它。

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
}

.download-content {
    display: grid;  
    grid-template-columns: 2fr 1fr;
    width: 70%;
    margin: 0 auto 0 auto;
}
.information{
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 6fr;
}

.download-thumbnail img {
    width: 100%;
    height: auto;
}

.download-link-info div {
    display: inline-block;
}

</style>
</head>
<body>
<div class="download-content">
    <div class="download-information">
        <div class="information">
            <div class="download-thumbnail"><img src="https://media.istockphoto.com/photos/cloud-computing-picture-id1087885966" alt="Sample image"></div>
            <div class="download-profile">
                <b><div class="img-title">Demo title</div></b>
                <div class="img-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
            </div>
        </div>
    </div>
    <div class="download-link-content">
        <div class="download-link-info">
            <div class="download-icon"><i class="fa fa-download" aria-hidden="true"></i></div>
            <div class="link-to-download"><a href="#">Download</a></div>
            <div class="download-link-information">
                <span>(
                    <span class="download-filesize">3,2 MB,</span>
                    <span class="download-filestype">PDF</span>
                    )
                </span>
            </div>
        </div>
    </div>
</div>
</body>

Answer 2

我不会使用所有这些花车，但为了尽可能接近您所做的，您可以这样做：

将.download-profile移动到.informationdiv.
围绕 .thumbnail 和紧随其后的 div（包含图像标题和描述）创建一个额外的包装器 div。（在 .download-profile 中只有两个 child 元素，它们将彼此并排放置）
将display: flex应用到.download-profile

.empty-space {
  width: 30%;
  float: left;
}

.download-information {
  width: 70%;
  float: left;
}

.download-thumbnail img {
  height: 30px;
  width: 30px;
  float: left;
  margin: 0 10px 6px 0;
}

.download-profile {
  float: left;
  display: flex;
}

<div class="download-content">
  <div class="download-information">
    <div class="empty-space"></div>
    <div class="information">
      <div class="download-profile">
        <div class="download-thumbnail"><img src="https://media.istockphoto.com/photos/cloud-computing-picture-id1087885966" alt="Sample image"></div>
        <div>
          <b><div class="img-title">Demo title</div></b>
          <div class="img-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
        </div>
      </div>
    </div>
  </div>
  <div class="download-link-content">
    <div class="download-link-content">
      <div class="download-icon"><i class="fas fa-download"></i></div>
      <div class="link-to-download"><a href="#">Download</a></div>
      <div class="download-link-information">
        <span>(
                    <span class="download-filesize">3,2 MB,</span>
        <span class="download-filestype">PDF</span> )
        </span>
      </div>
    </div>
    <div class="empty-space"></div>
  </div>
</div>

CSS 不起作用，DOM 结构来自 HTML

CSS does not work and DOM structure from HTML

html

css

web-frontend