Question

我试图在一侧显示缩略图，然后在另一侧显示标题，但是最终发生的是文本溢出，我不能只停留在其所在的div内。

.suggestedvids {
  float: right;
  width: 27.5vw;
  margin-top: 2.5%;
  margin-right: 2.5vw;
}

.onevid {
  height: 7vw;
  width: 100%;
  word-wrap: break-word;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumbnail {
  height: 100%;
  width: auto;
}

.vidInfo {
  height: 100%;
}

<div className="suggestedvids">
  <div className="onevid">
    <img className="thumbnail" src="https://i.ytimg.com/vi/NO2DaxhoWHk/mqdefault.jpg" />
    <a className="vidInfo">
      <p1>Build Real Web App with React #01</p1>
      <br></br>
      <p2>Rem Zolotykh</p2>
    </a>
  </div>
</div>

Answer 1

您可以这样：

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.col-1 {
    float: left;
    width: 30%;
}
.col-2 {
    float: left;
    width: 70%;
    padding: 0 15px;
}
p {
    margin: 0;
    margin-bottom: 10px;
}
.thumbnail {
    width: 100%;
}

<div class="row">
  <div class="col-1">
    <img class="thumbnail" src="https://i.ytimg.com/vi/NO2DaxhoWHk/mqdefault.jpg" />
  </div>
  <div class="col-2">
    <p>Build Real Web App with React #01</p>
    <p>Rem Zolotykh</p>
  </div>
</div>

Answer 2

您仍然有很多要学习的有关html和CSS的知识。 html中没有像drop这样的属性，应该是filter，也没有像className或class这样的元素。这是根据您的代码更新的工作代码。

<p1>

<p2>

Answer 3

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

.column1 {
    float: left;
    width: 30%;
    padding: 10px;
    min-height: 7vw;
}
.column2 {
    float: left;
    width: 70%;
    padding: 10px;
    min-height: 7vw;
}
.thumbnail {
    width: 100%;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
    <div class="column1" style="background-color:#aaa;">
        <img class="thumbnail" src="https://i.ytimg.com/vi/NO2DaxhoWHk/mqdefault.jpg" />
    </div>
    <div class="column2" style="background-color:#bbb;">
        <p1>Build Real Web App with React #01</p1>
        <br></br>
        <p2>Rem Zolotykh</p2>
    </div>
</div>

</body>
</html>

Answer 4

如果我正确理解了您的问题，那么这个简单的代码应该可以工作。

编辑：由于窗口太小，它似乎在代码段中不起作用。如果将其展开，看起来就很好。

df = df.assign(ids=ids).dropna(subset=['ids'])
df
     name       date type  ids
1  banana 2018-08-18    b  2.0

img {
  float: left;
}

figcaption {
  float: left;
}

文字从div的底部开始

4 个答案: