Question

test_string = c("ABC 2-APPLE", "123 25-APPLE", "DEF GHI 567-APPLE", "ORANGE")

当float为“ right”时左侧不可见边框，而float为“ left”时右侧不可见边框 https://jsfiddle.net/amc9s21v/2/

Answer 1

.photo {
  width: 300px;
  height: 400px;
  border: 1px solid black;
  overflow: auto;
  margin-top: 20px;
  margin-left: 20px;
}

img {
  height: 100%;
  width: auto;
  float: right;
}

<body>
  <div class="photo">
    <img src="https://images.freeimages.com/images/large-previews/68c/delicate-arch-2-1391623.jpg">

  </div>
</body>

</html>

溢出：自动完成工作

Answer 2

尝试将可见更改为自动

overflow: auto;

Answer 3

只需使用overflow: hidden;。比代码变成：

<!DOCTYPE html>
<html lang="ru"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .photo{
            width: 300px;
            height: 400px;
            border: 1px solid black;
            margin-top: 20px;
            margin-left: 20px;
            overflow: hidden;
        }

        img{
            height: 100%;
            width: auto;
            float: right;
          }
    </style>


  </head>
  <body >
    <div class="photo">
       <img src="https://images.freeimages.com/images/large-previews/68c/delicate-arch-2-1391623.jpg">

    </div>
  </body></html>

如果要显示溢出区域，请尝试以下代码：

<!DOCTYPE html>
<html lang="ru"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .photo {
        width: auto;
        height: 400px;
        border: 1px solid black;
        display: inline-flex;
        margin-top: 20px;
        margin-left: 20px;
      }

      img {
        height: 100%;
        width: auto;
        float: right;
      }
    </style>


  </head>
  <body >
    <div class="photo">
        <img src="https://images.freeimages.com/images/large-previews/68c/delicate-arch-2-1391623.jpg">

    </div>
  </body></html>

DEMO

在图像溢出的一侧看不到容器的边框

3 个答案: