html - 图像的CSS停止工作

Question

我在带有文字的大框右侧放置了两张图片。在我重新打开预览之前，一切看起来都很好。这两张照片现在以全尺寸显示在页面底部。无论我在我的 css 文件中写入什么，它们都不会移动一点或完全消失。

* {
  font-family: Verdana
}
html {
  background-color: #e5f2ff
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 12em;
  background-color: #666666;
  text-align: center;
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: 0em 0em 2em 0em #666666
}
li img {
  display: block;
  width: 9em;
  height: 9em;
  margin: auto;
  border: 0.2em solid #e5f2ff;
  border-radius: 100%;
  margin-top: 1em;
  margin-bottom: 3em;
  padding: 0.3em
}
li a {
  display: block;
  padding: 1em 0em 1em 0em;
  text-decoration: none;
  color: white;
  font-size: 1.1em;
  border-bottom: 0.15em solid #e5f2ff
}
.bot {
  border: 0
}
a:hover {
  font-weight: bold;
  color: white;
  font-size: 1.5em;
  padding-bottom: 0.5875em;
  padding-top: 0.5875em
}
a:active {
  font-weight: bold;
  font-size: 1.5em;
  background-color: black;
  padding: 0.8em;
  border: 0
}
a:link {
  color: white
}
a:visited {
  color: white
}
#info {
  padding: 1em;
  margin: 6em 0em 10em 15em;
  border: 0.15em solid black;
  background-color: white;
  width: 35em;
  float: left
}
#sidenote {
  font-size: 0.7em
}
/* everything under here stopped working */

table {
  float: right;
  display: inline;
  position: relative;
  margin: 4.9em 4em 1em 1em;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: underline
}
tr img {
  width: 12em;
  height: 12em;
  padding: 1em;
  border-radius: 100%;
  margin: 1em
}
#under {
  padding: 0em;
  margin: 0
}

<ul>
  <li>
    <img src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg" />
  </li>
  <li> <a href="https://happybone.se" class="top"> Start </a>
  </li>
  <li> <a href="https://giftigt.happybone.se" class="top"> Giftigt </a> 
  </li>
  <li> <a href="https://forum.happybone.se" class="top"> Forum </a>
  </li>
  <li> <a href="https://kontakt.forum.se" class="bot"> Kontakt </a>
  </li>
</ul>



<div id="info">
  <h3>Välkommen till happybone!</h3>
  <br>
  <p>Här på happybone vill vi underlätta för alla hundägare, nya som gamla.</p>
  <p>Vi erbjuder ett flertal roliga och lättnavigerade sidor. Vi har ett forum där du har möjlighet att diskutera med oss på happybone eller andra passionerade hundägare. Eller varför inte ordna upp en hundträff i en av Sveriges hundratals hundparker?</p>
  <p>Du navigerar i panelen till vänster om denna text.</p>
  <p>Där hittar du flikarna Start, Giftigt, Forum och Kontakt</p>
  <p>Klicka på en utav flikarna för mer information.</p>
  <p>Vi vill att du ska trivas här på happybone, hör därför gärna av dig till oss på info@happybone.se om det är något du undrar över.</p>
  <br>
  <br>
  <p id="sidenote">Sidan är under konstruktion, tack för ditt tålamod.</p>
</div>

<table>
  <tr>Veckans Bilder</tr>
  <tr>
    <img src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg" />
  </tr>
  <tr>
    <img id="under" src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg" />
  </tr>
</table>

我将永远感激您的帮助。谢谢!

Answer 1

我不得不实际更改 HTML，我更改的唯一 CSS 是删除 imgs 上的 float 然后使用 left: 10em;

是元素上的 float 和巨大的边距。默认 1em = 16px;

在文本和 img 周围包裹了一个 flexbox。

最小化边距。

制作所有元素 box-sizing:border-box; 所以所有的尺寸都包括在内，填充，边框等......

* { box-sizing: border-box; font-family: Verdana }

html { background-color: #e5f2ff }

ul { list-style-type: none; margin: 0; padding: 0; width: 12em; background-color: #666666; text-align: center; position: fixed; height: 100%; top: 0; left: 0; box-shadow: 0em 0em 2em 0em #666666 }

li img { display: block; width: 9em; height: 9em; margin: auto; border: 0.2em solid #e5f2ff; border-radius: 100%; margin-top: 1em; margin-bottom: 3em; padding: 0.3em }

li a { display: block; padding: 1em 0em 1em 0em; text-decoration: none; color: white; font-size: 1.1em; border-bottom: 0.15em solid #e5f2ff }

.bot { border: 0 }

.box { display: flex; width: 100vw; height: 100vh; justify-content: center; position: relative; left: 3em;}

a:link { color: white }

a:visited { color: white }

a:hover { font-weight: bold; color: white; font-size: 1.5em; padding-bottom: 0.5875em; padding-top: 0.5875em }

a:active { font-weight: bold; font-size: 1.5em; background-color: black; padding: 0.8em; border: 0 }

#info { padding: 1em; border: 0.15em solid black; background-color: white; width: 50vw; height: 75vh; margin: 3em 0 0 0; }

#sidenote { font-size: 0.7em }

/* everything under here stopped working */


table {  position: relative; text-align: center; font-size: 1.1em; font-weight: bold; text-decoration: underline; width: 25vw; height: 75vh; }

tr img { width: 200px; height: 200px; padding: 1em; border-radius: 100%; }


#under { padding: 0em; margin: 0 }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Happybone</title>
<style>

</style>
</head>
<body>
<ul>
    <li>
        <img src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg"/>
    </li>
    <li> <a href="https://happybone.se" class="top"> Start </a></li>
    <li> <a href="https://giftigt.happybone.se" class="top"> Giftigt </a> </li>
    <li> <a href="https://forum.happybone.se" class="top"> Forum </a></li>
    <li> <a href="https://kontakt.forum.se" class="bot"> Kontakt </a></li>
</ul>
<section class="box">
<div id="info">
    <h3>Välkommen till happybone!</h3>
    <br>
    <p>Här på happybone vill vi underlätta för alla hundägare, nya som gamla.</p>
    <p>Vi erbjuder ett flertal roliga och lättnavigerade sidor. Vi har ett forum där du har möjlighet att diskutera med oss på happybone eller andra passionerade hundägare. Eller varför inte ordna upp en hundträff i en av Sveriges hundratals hundparker?</p>
    <p>Du navigerar i panelen till vänster om denna text.</p>
    <p>Där hittar du flikarna Start, Giftigt, Forum och Kontakt</p>
    <p>Klicka på en utav flikarna för mer information.</p>
    <p>Vi vill att du ska trivas här på happybone, hör därför gärna av dig till oss på info@happybone.se om det är något du undrar över.</p>
    <br>
    <br>
    <p id="sidenote">Sidan är under konstruktion, tack för ditt tålamod.</p>
</div>
<table>
    <tr><td><h1>Veckans Bilder</h1></td></tr>
    <tr>
<td>
        <img src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg"/></td>
</tr>
<tr>

        <td><img id="under" src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg"/></td>

    </tr>
</table>
</section>
</body>
</html>