Question

我对HTML非常陌生，刚刚开始创建我的第一个网站。我只是想知道如何通过HTML而不是CSS来移动文本，他们说一张图片胜过千言万语：

所以我的目标是让文字说“排版＆＃39;进入第一个红色框，其余进入下面的红色框。

有没有办法只用HTML做这个，或者我应该写一些时髦的CSS来处理它？</ p>

Answer 1

是的，CSS是必要的，因为每个主要浏览器的默认样式都与您所描绘的完全相同。如果元素为inline-block，则它们会对齐前一个img，div或其他元素的底部。（从技术上讲，如果下一个元素更高，前面的元素也会对齐下一个元素的底部。所以，如果它们在一行中，所有较短的元素都会对齐最高元素的底部。）将它们对齐到在顶部，您必须将vertical-align属性设置为前一个img或div。

Here's a very simple example of this.

但是，您无法让浏览器在第二个红色方块中添加更多文本（或任何其他内容），而不会将您拥有的内容包裹在div或其他元素中。

Thus we do this.

以下是一些additional examples内嵌块元素在设置和未设置vertical-align时彼此相邻的行为。

其他样式调整，例如将p进一步与h1分开，可以使用CSS的margin或padding规则进行。

Answer 2

这是我发现的最佳方式

<!DOCTYPE html>
<head>

<style>
#RedBoxOneText{font-size:30px; margin:45px 280px; color:red; position:absolute;}
#RedBoxTwoText{font-size:18px; margin:130px 280px; color:blue; position:absolute; width:500px;}
</style>


</head>
<body>

<div id="RedBoxOneText">Typography</div>
<div id="RedBoxTwoText">Typography text box with random words words words words words words words words words</div>

<img src="http://s28.postimg.org/8jvt54zy5/Screen_Shot_2014_09_08_at_3_45_31_PM.png">


</body>

＆＃34;职位：绝对;＆＃34;确保指定的div以简单的方式浮动在所有内容之上

＆＃34;保证金：45px 280px;＆＃34;使文本浮动在给定的坐标

中

＆＃34;宽度：500px;＆＃34;对于RED BOX TWO会在文本周围形成一个不可见的边框，使其变大会使文本以直线从图像中飞出，具体取决于您设置的像素数量

＆＃34; font-Size：28px;＆＃34;根据您放置的值

，使文本大小更大或更小

希望这会有所帮助：）

手动将文本移动到html

2 个答案: