試圖讓我的鏈接到所有排隊

我想讓我的「更多」鏈接直線排隊。我想知道我應該爲他們製作一個單獨的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

試圖讓我的鏈接到所有排隊

回答

相關問題