Question

我刚刚开始进入CSS / HTML（大约一小时前），并遇到了一个问题。我试图将这些显示作为内联样式，但是，边框似乎远远超过了图像，而这反过来又不允许它们按照我的意愿显示。

感谢您的帮助！

这是我的JSfiddle：https://jsfiddle.net/pghfekj6/

HTML

<div class="gallery">
      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg">
      </figure>

      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg">
      </figure>
</div>

CSS

body {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  color: lightgrey;
}

h1 {
  margin: 20px;
}

.gallery {
  display: inline;
}

.gallery-item {
  margin: 20px;
  border: 5px solid red;
}

Answer 1

您还没有将边框应用于图像，而是应用于其容器（图），默认情况下是块级元素。也就是说，它跨越页面的宽度。

.gallery-item img {
    border: 5px solid red;
}

Answer 2

我希望我的回答足够你了:)

如果您想在图片中制作边框，那么您可以在css上 img 元素，只需将选择器更改为img元素

旧选择器 .gallery-item

新选择器 .gallery-item img

＆＃13;

body {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  color: lightgrey;
}

h1 {
  margin: 20px;
}

.gallery {
  display: inline;
}

.gallery-item img {
  margin: 20px;
  border: 5px solid red;
}

＆＃13;

<header>
  <title>web gallery.</title>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>
</header>

<body>
  <div class="container">
    <header>
      <h1>
    web gallery.
      </h1>
    </header>

    <div class="gallery">
      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg">
      </figure>

      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg">
      </figure>

      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://66.media.tumblr.com/809db161738e0255821af747f0be1873/tumblr_o7pkyjVO0s1tsrhx6o1_1280.jpg">
      </figure>

      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://66.media.tumblr.com/8b528e2542564533b0c21d4a23568928/tumblr_o6mh4gKIFA1up0523o2_1280.jpg">
      </figure>

      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://67.media.tumblr.com/ce934191c63533db7fb398a5766c1778/tumblr_o6mh4gKIFA1up0523o1_1280.jpg">
      </figure>

      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://66.media.tumblr.com/39cbc0c8de8e947eac27d97b628fa065/tumblr_o7bwagld1r1ss9jvwo1_540.jpg">
      </figure>

      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://66.media.tumblr.com/986dc5a68d05dc66588de5b4016aa7d6/tumblr_o6mh4gKIFA1up0523o3_1280.jpg">
      </figure>

      <figure class="gallery-item">
        <img width="50%" height="50%" src="http://66.media.tumblr.com/ca8860045cbe96aec9598a69be76b459/tumblr_o6mh4gKIFA1up0523o5_1280.png">
      </figure>
    </div>
  </div>
</body>

＆＃13;

边界延伸过去的形象？

2 个答案: