我正试图让我的更多＆＃34;更多＆＃34;链接到所有直线。我想知道我是否应该为他们制作一个单独的div？否则，我真的不知道该怎么做。我是新手，所以不要过于严厉地判断。谢谢！我添加了一个jsfiddle，但我知道我没有正确地做到这一点......我希望你能看到代码。我将添加一张我遇到问题的图片：https://jsfiddle.net/uxnLsxxk/
<div class="box1">
<div class="column-left">
<h2> Content</h2>
答案 0 :(得分：1)
检查Jsbin
中的输出
@media only screen and (min-width: 961px) {
/*-----CONTENT -----*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
font-family: 'Arapey', serif;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
text: black;
background-color:#670809;
height:70px;
text-align: center;
letter-spacing:1px;
line-height: 55px;
}
header, h1, h2{
font-family: 'Yatra One', cursive;
}
nav ul li a {
display:inline-block;
text-align: center;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;*/
color: white;
}
nav ul li a:hover {
/*background-color:none;*/
color: white;
}
nav ul li a:visited {
color:white;
}
/* header tags */
h1 {
text-align: center;
color:#013397;
font-size: 40px;
margin: 5px;
}
h2{
text-align: center;
color:#670809;
font-size: 30px;
margin: 5px;
}
p{
text-align: center;
}
.column-left{
float: left;
width: 30%;
padding: 1%;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
}
section{
text-align: center;
width: 100%;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
height: 50px;
background-color:#670809;
font-family: 'Yatra One', cursive;
/* text */
padding-left: 10px;
padding-top: 10px;
color: #ffffff;
font-size: 15px;
text-align:center;
}
a { color: white; }
a, a:hover, a:active, a:visited { color: white; }
.box1{
border-width:thick;
border-style:solid;
border-color:#287EC7;
}
#button1{
color:black;
float: left;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button2{
color:black;
display: inline-block;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button3{
float: right;
width: 30%;
padding: 1%;
color:black;
font-weight:bold;
}
.more{
position:relative;
left:-120px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<a href="headervideo.html">Home</a>
<a href="about.css">About</a>
<a href="contact.css">Contact</a>
<a href="msum.css"> MSUM</a>
</header>
<div id="content">
<!--msum logo-->
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
</figure>
<object type="image/svg+xml" data="newsvg.svg" ></object>
<div class="video-txt" ></div>
<section>
<section>
<h1> GCOM 366 Overview</h1>
<div class="box1">
<div class="column-left">
<h2> Content</h2>
<img class="img" src="techpic4.jpg" alt="example web page" width="200" height="200" />
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources.
<br>
<!-- <a id="button1" href="about.css">More</a>-->
</p>
</div>
<br>
<div class="column-center">
<h2>Objectives</h2>
<img class="img" src="techpic1.jpg" alt="html code" width="200" height="200" />
<p>Upon successful completion of the course the student will:
1) Demonstrate competency in the following computer software applications or
practices;
a. HyperText Markup Language (HTML5)
b. Cascading Style Sheets (CSS3)
c. Photoshop
d. IFirefox, Chrome, Safari, IE
e. FTP clients (Fetch, Filezilla, etc.)
2. Design web pages of various complexities.
3. Understand terminology used in web publishing.
4. Discuss the importance of graphic applications and their relationship to the graph
-
ic communications industry.
<br>
<!--<a id="button2" href="contact.css">More</a>-->
</p>
</div>
<div class="column-right">
<h2> Project</h2>
<img class="img" src="techpic2.jpg" alt="keyboard" width="200" height="200" />
<p>The course centers around weekly projects that will feed into the development of a
final project. A website must a have a clear purpose and established brand students will develop their plan for this, and execute it with skills learned in the class.
The website must be well organized, competitively designed, and skillfully coded
<br>
<a id="button3" href="msum.css" class="more">More</a>
</p>
</div>
</section>
</div>
<footer>
</footer>
</body></html>
</body>
</html>
答案 1 :(得分：1)
你也可以使用好的旧表
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td>
<h2> Content</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Objectives</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Project</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 2 :(得分：0)
此代码应该这样做。
<强> HTML
<div class="text-container">
<p class="overview-text">
... your text ...
</p>
<div class="more-link">
More
</div>
</div>
<强> CSS
.overview-text, .more-link {
text-align: center;
}
将HTML放在 img 标记之后。
答案 3 :(得分：0)
设置概述文本类的最小高度。我希望它能解决你的问题。例如
<强> CSS：
.overview-text{
min-height: 200px
}