2015-09-04 75 views
5

我的問題涉及電子書格式,但編碼是非常類似於網頁的HTML和CSS。我有一個類似於顯示爲「{文本文本}」的引文的文本框。我需要這些元素水平對齊,並在字體大小更改時繼續對齊。電子書html和css對齊圖像和文本

REVISED HTML和CSS:

HTML:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xml:lang="en-gb" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Lies They Teach in School</title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"/> 

</head> 
<body> 
<h2 class="h2">O<small>UR</small> F<small>IRST</small> P<small>RESIDENT</small></h2> 

<div id="bigbox"> 
    <div class="textbox"> 
    <div class="imageleft"><img src="images/c1.jpg" alt="Image"/></div> 
    <div class="imageright"><img src="images/c2.jpg" alt="Image"/></div> 
    <div class="noindentt">George Washington was the first president of our country.<br/><b>Don&#8217;t you believe it</b>.</div> 
    </div> 
</div> 

<p class="indent">In the formative days of our union, dating from September 1774, seven men, beginning with Peyton Randolph of Virginia, held the office of president of the Continental Congress, the first functioning government of our fledgling nation.</p> 
<p class="indent">With the adoption of the Articles of Confederation, in March 1781, the Continental Congress officially became the &#8220;United States, in Congress Assembled,&#8221; marking the beginning of transition from an alliance of colonies to a central government. John Hanson of Maryland was unanimously chosen as the first presiding officer serving a full term under the Articles. Because of his prominence in the Revolution and his influence in the Congress, other potential candidates declined to run against him. Hanson is thus considered by many historians as the first &#8220;president of the United States.&#8221;</p> 
<p class="indent">Hanson was the head of the government, presiding over Congress but without true executive powers, which were exercised by the Congress as a whole. Seven other &#8220;presidents&#8221; followed Hanson, including Richard Henry Lee of Virginia and John Hancock of Massachusetts, each serving an average of one year.</p> 
<p class="indent">But the government under the Articles of Confederation was too inefficient for the young amalgamated country, relinquishing too much power to the several states. In response to the need for a stronger central authority, the Congress assembled for the last time in March 1789 and produced the Constitution of the United States, naming George Washington as president.</p> 
<p class="indent">Thus, while George Washington was the first &#8220;president of the United States&#8221; under the Constitution, in actuality he was preceded by eight others who held that title.</p> 
</body> 
</html> 

我只是抓住它涉及到這個頁面的CSS的頂部。

CSS:

bigbox 
{ 
margin-right:0em; 
margin-left:0em; 
margin-top:5em; 
margin-bottom:1em; 
padding-right:1.5em; 
padding-left:1.5em; 
border-color:#EF3F35; 
} 
.textbox 
{ 
width:100%; 
} 
.imageleft 
{ 
float:left; 
height:100px; 
} 
.imageright 
{ 
float:right; 
height:100px; 

} 
.noindentt 
{ 
font-size:1em; 
padding-left:0.5em; 
padding-right:0.5em; 
padding-top:1em; 
padding-bottom:1em; 
text-align:justify; 
background:green; 

如果我在Web瀏覽器中預覽我的代碼,它看起來不錯。但是,當我在Adobe Digital Editions中以epub的形式預覽它時,我會在右側找到標題,然後在下一個文本框中輸入標題,然後在下面顯示圖像(它們是括號)。如果有幫助,這裏是epub的屏幕截圖? enter image description here

+0

你願意使用引導程序嗎? –

+0

嗨Bipashant - 我幾乎沒有通過html&css:(我不知道bootstrap – mizsue

+0

@ Maximillian Laumeister - 謝謝,我想我把我的修改添加到原來的帖子....我希望:) – mizsue

回答

1

請嘗試下面的代碼,它工作。

HTML:

<div id="bigbox" > 
    <div class="textbox"> 
    <div class="imageleft"><img src="images/c1.jpg" alt="Image"/></div> 
    <div class="imageright"><img src="images/c2.jpg" alt="Image"/></div> 
    <div class="noindentt">George Washington was the first president of our country.<br/><b>Don&#8217;t you believe it</b>.</div> 
    </div> 
</div> 

的CSS:

#bigbox 
{ 
margin-right:0em; 
margin-left:0em; 
margin-top:0.7em; 
margin-bottom:2.5em; 
padding-right:1.5em; 
padding-left:1.5em; 
border-color:#EF3F35; 
} 
.textbox 
{ 
width:100% 
} 
.imageleft 
{ 
float:left; 
background:yellow; 
height:100px; 
} 
.imageright 
{ 
float:right; 
background:red; 
    height:100px; 
} 
.noindentt 
{ 
font-size:1em; 
padding-left:2em; 
padding-right:2em; 
text-align:justify; 
margin-bottom:0em; 
background:green; 
    height:100px; 
} 
+0

Arun Kumar M - 謝謝你看這個。我已經做出了部分成功的調整。圖像完美並對齊。現在的問題是文本框已經開始在頁面的頂部,而不是在圖像的頂部。此外,這兩行文本之間還有很大差距。 – mizsue

+0

我測試了我的文件作爲epub,並且圖像保持對齊,而不管字體大小如何,這是非常棒的進展。圖像內部的文字保持在一起,所以沒有差距 - 再好不過了。所以我仍然有這個問題,那就是文本框跳轉到頁面頂部,完全覆蓋首先出現的標題。那麼如何讓文本框與圖像的頂部對齊呢? – mizsue

+0

Arun Kumar M - 我已經進一步調整了Bigbox中的margin-top至5em,並將我的文本框降至正確的位置。所以最後一個問題是讓圖像對齊到文本框的頂部,而不是出現在文本框下。 – mizsue

2

痛苦,心靈麻木後,行由行調整 - 我想通了這個問題。在html「bigbox」中,我從「bigbox」div中刪除了「noindentt」,並將其更改回p標記;不得不在填充等方面作出調整,但得到它的工作。謝謝@Arun Kumar M爲您提供圖像對齊方面的幫助 - 非常有幫助!我幾乎完成了我在這個項目上的工作 - 嗨!

+0

這很棒@mizsue和你,非常歡迎 –