Question

因此，在名为Teachable的平台上使用HTML和CSS时遇到了一些困难。

基本上，我正在尝试制作2列： -第1列-图片 -第2栏-文字

当我仅将<div class="column">放在第1列时，我得到了：

Layout 1

当我将<div class="column">放在两个部分上时，都可以在这里看到。

Layout 2

如您所见，在这种情况下，第2列变得非常狭窄。能否使第1列的宽度约为25％，而使第2列的宽度约为75％？

这是我正在使用的CSS代码：

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Answer 1

/*created separate classes for div sections of img and text*/
/*column-1 is img div*/
.column-1 {
  float: left;
  width: 25%;
  height: 100%;
  padding: 5px;
}

/*img must be set to 100% width to fill div container*/
img {
  width: 100%;
}

/*column-2 is text div*/
.column-2 {
  width: 75%;
  padding: 5px;
}
/*Change padding and width to fit your needs.*/

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="column-1">
      <img src="SS_img_01-2-s.jpg">
    </div>
    <div class="column-2">
      <p>
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
        As you can see, column 2 becomes very narrow in this case.
      </p>
  </body>
</html>

这是我认为您要尝试达到的目标，但是，我可能是错的。

编辑：好的，所以您可以在第1列中添加“ height：100％”，除非您想在img下方添加内容，但是如果只是img和文本，那应该没问题。如果确实需要在img下方添加内容，我认为使用z-index并以正确的方式放置元素应该可以。希望这是您要寻找的。另外，由于某种原因，代码片段未显示我在其上运行代码时得到的结果，因此请确保检查其是否可以正常工作。

有没有办法使此HTML和CSS在可教学页面上工作？

1 个答案: