试图让我的链接到所有排队

我想让我的“更多”链接直线排队。我想知道我应该为他们制作一个单独的div吗？否则，我不知道该怎么做。我是新手，所以不要太苛刻。谢谢！我添加了一个jsfiddle，但我知道我没有正确地做到这一点......我希望你可以看看代码。我要补充，我有问题什么的图片：https://jsfiddle.net/uxnLsxxk/试图让我的链接到所有排队

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

来源

2016-09-20 Cakers

入住Jsbin

@media only screen and (min-width: 961px) { 
 

 

 

 

 

 

 
/*-----CONTENT -----*/ 
 
figure.adjustable { 
 
\t \t width: 29%; 
 
\t } 
 

 
html { 
 
\t position: relative; 
 
\t min-height: 100%; 
 
\t } 
 

 
body { 
 
    margin: 0 0 100px; /* bottom = footer height */ 
 
\t \t font-family: 'Arapey', serif; 
 
\t \t 
 
\t \t 
 
\t \t /*font-family: 'Courier New', sans-serif;*/ 
 
\t \t font-weight: 300; 
 
\t \t font-size: 20px; 
 
\t } 
 

 
header { 
 
\t position: fixed; 
 
\t z-index: 1000; 
 
    width: 100%; 
 
    top: 0px; 
 
\t \t text: black; 
 
    background-color:#670809; 
 
\t height:70px; 
 
\t text-align: center; 
 
\t letter-spacing:1px; 
 
\t line-height: 55px; 
 
\t 
 
\t } 
 
header, h1, h2{ 
 
font-family: 'Yatra One', cursive; \t 
 
} 
 

 

 
nav ul li a { 
 
\t \t display:inline-block; 
 
\t \t text-align: center; 
 
\t \t padding: 1 px; 
 
\t \t color: #fff; 
 
\t \t letter-spacing: 1 px; 
 
\t \t text-decoration:none; 
 
\t \t text-transform: uppercase; 
 
\t \t margin: .55em; 
 
\t \t font-size: 5 px; 
 
\t \t float: right; 
 
\t \t 
 
\t } 
 

 
nav ul li.active a { 
 
\t /*background-color: none;*/ 
 
\t color: white; 
 
\t } 
 

 
nav ul li a:hover { 
 
\t /*background-color:none;*/ 
 
\t color: white; 
 
\t } 
 
\t 
 
\t nav ul li a:visited { 
 
\t color:white; \t 
 
\t } 
 

 
/* header tags */ 
 

 
h1 { 
 
text-align: center; 
 
color:#013397; 
 
font-size: 40px; 
 
margin: 5px; 
 
\t } 
 

 
h2{ 
 
\t text-align: center; 
 
\t color:#670809; 
 
\t font-size: 30px; 
 
\t margin: 5px; 
 
\t } 
 

 
p{ 
 
\t text-align: center; 
 
\t } 
 

 
.column-left{ 
 
\t float: left; 
 
\t width: 30%; 
 
\t padding: 1%; 
 
\t 
 

 
\t } 
 
.column-right{ 
 
\t float: right; 
 
\t width: 30%; 
 
\t padding: 1%; 
 
\t 
 
\t } 
 
.column-center{ 
 
\t display: inline-block; 
 
\t width: 30%; 
 
\t padding: 1%; 
 
\t 
 
\t } 
 

 
section{ 
 
\t text-align: center; 
 
\t width: 100%; 
 
\t } 
 

 
footer { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t width: 100%; 
 
\t margin: 0; 
 
\t height: 50px; 
 
\t background-color:#670809; 
 
\t font-family: 'Yatra One', cursive; \t 
 
\t /* text */ 
 
\t 
 
\t padding-left: 10px; 
 
\t padding-top: 10px; 
 
\t color: #ffffff; 
 
\t font-size: 15px; 
 
\t text-align:center; 
 
} 
 

 
a { color: white; } 
 

 
a, a:hover, a:active, a:visited { color: white; } 
 

 
.box1{ 
 
border-width:thick; 
 
\t border-style:solid; 
 
border-color:#287EC7; \t 
 
} 
 
#button1{ 
 
color:black; 
 
float: left; 
 
\t width: 30%; 
 
\t padding: 1%; 
 
\t font-weight:bold; 
 
} 
 

 
#button2{ 
 
\t color:black; 
 
display: inline-block; 
 
\t width: 30%; 
 
\t padding: 1%; 
 
\t font-weight:bold; 
 
} 
 

 
#button3{ 
 
\t float: right; 
 
\t width: 30%; 
 
\t padding: 1%; 
 
\t color:black; 
 
\t font-weight:bold; 
 
} 
 
\t .more{ 
 
\t \t position:relative; 
 
\t \t left:-120px; 
 
\t }

<!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> 
 
MaKayla McLain-Graning 2016 
 

 

 
</footer> 
 

 

 
</body></html> 
 

 
</body> 
 
</html>

来源

2016-09-20 03:28:27

谢谢谢谢谢谢！这真的帮了我。 @Mandar Sant – Cakers

上帝保佑你......！ –

此代码应该这样做。

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

放置IMG标签后的HTML。

来源

2016-09-20 03:23:28 user2182349

输出可以使用good'old表太

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

来源

2016-09-20 03:32:45 deviantxdes

避免使用表格，因为它们使将来更改布局困难得多。 – user2182349

套装最小高度为overview-text class。我希望它能解决你的问题。例如

CSS：

.overview-text{ 
    min-height: 200px 
}

来源

2016-09-20 04:20:57

试图让我的链接到所有排队

回答

相关问题