图像不遵循页面流程并涵盖ul

Question

当我尝试将图像添加到页面底部时，在apiVersion: extensions/v1beta1 kind: Deployment metadata: creationTimestamp: null labels: io.kompose.service: api name: api spec: replicas: 1 strategy: {} template: metadata: creationTimestamp: null labels: io.kompose.service: api spec: containers: - image: blankit/web:0.0.1 name: api imagePullPolicy: IfNotPresent ports: - containerPort: 3001 resources: {} restartPolicy: Always status: {} 之后，图像会堆叠到此列表，而不是跟随页面的流程。

实际结果：

预期结果：

底部有图片

我的代码：

＆＃13;

＆＃13;

<ul>

＆＃13;

* {
  Font-family: Georgia;
}
h1 {
  font-family: "Playfair display";
  color: rgba(0,102,255,0.7);
  background-color: rgba(120, 249, 17, 0.3);
  word-spacing: 0.3 em;
  font-weight: 400;
  letter-spacing: 0.7em;
  text-align: center;
  text-transform: uppercase;
}
p,ul,ol {
  color: DarkSlateGrey;
  line-height: 1.8em;;
  word-spacing: 0.3em;
  letter-spacing: 0.05em;
}
a { font-style: italic;
}
.header {
	/*background: url("https://www.newyorkspaces.com/upload10/122775/Zebide-Emerald-City-MLB308WALL---Copy.jpg") repeat-x    center center;*/
	background-size: contain;
    background-image: -webkit-linear-gradient(#369, #6CC);
	border-style: solid;
	width: 100%;
	margin: auto;
	position: static;
	z-index: 1000;
}
.menu {
	word-spacing: 5em;
	width: 100%;
	margin: auto;
	text-transform: uppercase;
}
ul {
	width: 80%;
	margin: auto;
	height: 30px;
}
#homepage-menu ul li{
	list-style-type: none;
	display: inline;
	border: 1px solid rgba(204,102,102,1);
	background-color: rgba(0,0,255,0.2);
	font-size: 18px;
	width:90%;
	margin: 0px auto;
}
.content {
	box-sizing: border-box;
	border-style: 1px solid rgba(204,204,204,1);
	background-color: rgba(102,102,102,0.07);
	width: 50%;
	margin: auto;
	padding-top: 10px;
	/*position: relative;
	top: 10px;
	left: 10px; */
	z-index: 999;
	text-align:justify;
}
.link {
	width:50%;
	margin: 0px auto;
	text-align: center;
}
.image {
	height: 400px;
	width: 400px;
	display: block;
	margin: 0px auto;3
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

出现此问题是因为您的CSS代码中ul的高度已固定。

height: 30px;

移除高度将解决问题。

我还添加了

img {max-width:100; height: auto}

使图像响应。

down vote favorite * {
  Font-family: Georgia;
}

h1 {
  font-family: "Playfair display";
  color: rgba(0, 102, 255, 0.7);
  background-color: rgba(120, 249, 17, 0.3);
  word-spacing: 0.3em;
  font-weight: 400;
  letter-spacing: 0.7em;
  text-align: center;
  text-transform: uppercase;
}

p,
ul,
ol {
  color: DarkSlateGrey;
  line-height: 1.8em;
  word-spacing: 0.3em;
  letter-spacing: 0.05em;
}

a {
  font-style: italic;
}

.header {
  /*background: url("https://www.newyorkspaces.com/upload10/122775/Zebide-Emerald-City-MLB308WALL---Copy.jpg") repeat-x    center center;*/
  background-size: contain;
  background-image: -webkit-linear-gradient(#369, #6CC);
  border-style: solid;
  width: 100%;
  margin: auto;
  position: static;
  z-index: 1000;
}

.menu {
  word-spacing: 5em;
  width: 100%;
  margin: auto;
  text-transform: uppercase;
}

ul {
  width: 80%;
  margin: auto;
}

#homepage-menu ul li {
  list-style-type: none;
  display: inline;
  border: 1px solid rgba(204, 102, 102, 1);
  background-color: rgba(0, 0, 255, 0.2);
  font-size: 18px;
  width: 90%;
  margin: 0px auto;
}

.content {
  box-sizing: border-box;
  border-style: 1px solid rgba(204, 204, 204, 1);
  background-color: rgba(102, 102, 102, 0.07);
  width: 50%;
  margin: auto;
  padding-top: 10px;
  /*position: relative;
	top: 10px;
	left: 10px; */
  z-index: 999;
  text-align: justify;
}

.link {
  width: 50%;
  margin: 0px auto;
  text-align: center;
}

.image {
  height: 400px;
  width: 400px;
  display: block;
  margin: 0px auto;
}

img {
  max-width: 100%;
  height: auto;
}

<div>

  <p>So far I have learned the following things:</p>

  <ul>
    <li>Create a boilerplate in HTML</li>
    <li>Heading and title</li>
    <li>Create a paragraph</li>
    <li>Create Un-oredered and Ordered Lists (UL & OL)</li>
    <li>Insert a link to a page (Hyperlink)</li>
    <li>Insert Image on your page</li>
    <li>Insert ALT description for unpaired people</li>
    <li>Link image to a hyperlink</li>
    <li>Insert a BREAK onto my page</li>
    <li>W3C Style standard</li>
    <li>Insert non visible comment</li>
    <li>How to set up HTML link to CSS page(style page)</li>
    <li>Styling FONTS (font-family, font-style, font size, font weight, serif-sans-serif,)</li>
    <li>SPACING Lines, words and letters with PX - eM - </li>
    <li>Text TRANSFORM and Text ALIGN</li>
  </ul>
</div>
<img class="bowie" src="http://esq.h-cdn.co/assets/16/02/980x490/landscape-1452522826-david-bowie-5.jpg" />

Answer 2

从css

中的ul中删除height: 30px;