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;~~

浮子和元素上的巨大边缘。默认情况下1em = 16px;

在文本和imgs周围包裹了一个弹性框。

将利润率降至最低。

制作所有元素10,7，以便包括所有测量，填充，边框等...

＆＃13;

box-sizing:border-box;

＆＃13;

* { 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 }

＆＃13;

图像的Css停止工作

1 个答案: