2015-09-04 76 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和你,非常欢迎 –