手动将文本向上移动到html

手动将文本向上移动到html,html,css,formatting,Html,Css,Formatting,我对HTML非常陌生,刚刚开始创建我的第一个网站。我只是想知道如果能通过HTML而不是CSS移动文本,人们会怎么做,他们说一张图片抵得上千言万语: 所以我的目标是把“排版”的文本放在第一个红色框中,其余的放在下面的红色框中 有没有一种方法可以只使用HTML来实现这一点,或者我应该编写一些时髦的CSS来处理这一点?是的,CSS是必要的,因为每个主要浏览器中的默认样式都与您想象的完全一样。如果元素是内联块,则它们与前面的img、div或其他元素的底部对齐。(从技术上讲,如果下一个元素较高,则前一个

我对HTML非常陌生,刚刚开始创建我的第一个网站。我只是想知道如果能通过HTML而不是CSS移动文本,人们会怎么做,他们说一张图片抵得上千言万语:

所以我的目标是把“排版”的文本放在第一个红色框中,其余的放在下面的红色框中


有没有一种方法可以只使用HTML来实现这一点,或者我应该编写一些时髦的CSS来处理这一点?

是的,CSS是必要的,因为每个主要浏览器中的默认样式都与您想象的完全一样。如果元素是
内联块
,则它们与前面的
img
div
或其他元素的底部对齐。(从技术上讲,如果下一个元素较高,则前一个元素也将与下一个元素的底部对齐。因此,实际上,所有较短的元素都将与最高元素的底部对齐(如果它们在一行中)。)要将它们与顶部对齐,您必须将
vertical align
属性设置为前面的
img
div

但是,如果不将所拥有的内容包装到
div
或其他元素中,浏览器就无法在第二个红方块中添加更多文本(或任何其他内容)

下面是一些内联块元素在设置和不设置
vertical align
set时彼此相邻的行为


其他样式调整,如将
p
h1
进一步分离,可以使用CSS的
边距
填充
规则进行调整。

这是我找到的最好的方法

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

#RedBoxOneText{字体大小:30px;边距:45px 280px;颜色:红色;位置:绝对;}
#RedBoxTwoText{字体大小:18px;边距:130px 280px;颜色:蓝色;位置:绝对;宽度:500px;}
印刷术
带有随机单词的排版文本框
“Position:absolute;”确保指定的div以一种简单的方式浮动在所有div之上

“边距:45px 280px;”使文本在给定的坐标中浮动

红色框2的“宽度:500px;”会在文本周围形成一个不可见的边框,使其变大会使文本沿直线飞离图像,具体取决于您设置的像素数

“字体大小:28px;”根据输入的值使文本大小变大或变小


希望这有帮助:)

我认为CSS是一个好主意。如果你发布了你正在使用的HTML,这会有所帮助,尽管答案是不管怎样都将文本放在相应的HTML元素中。如果你发布了HTML我可以支付的答案,显示你。HTML和CSS齐头并进,没有真正的理由避免在这种情况下使用CSS。将HTML视为页面中的内容,CSS视为页面显示信息的方式。不必要地设置
position:absolute
不是一个好主意,尤其是当有专门设计用于解决OP问题的CSS规则时。它完成了任务。它很短,我使它易于理解,并给出了上面的代码示例。如果您将代码更改为您指定的需要,它仍然会以相同的方式显示。无论你编写的页面多么专业或糟糕,它仍然是你想要的。如果它不起作用,使用
position:absolute
在它不属于的位置进行一些更改,这样很难快速维护。如果OP认真对待学习web开发,教他使用反模式暂时解决问题对他弊大于利。如果他认真对待事情,他可以从youtube视频中学到很多东西。我为他做了一件简单的事。正如他所说,“我对HTML非常陌生,刚刚开始创建我的第一个网站”,请注意句子中的“非常新”部分。不要给别人难懂的东西。例如,我打赌他不知道“必须将垂直对齐属性设置为前面的img或div”是什么意思,比如他键入了什么代码?他是怎么打的?。比如“创建一个样式表并将其链接到html”,他可能知道这一点,但他是如何做到的?你需要更多的信息,他对htmlIn非常陌生。我的原始的、未经编辑的回答我喜欢两个JSFIDDLE,解释到底要写什么代码。我不是一个真正喜欢在互联网上争论的人,但这是HTML/CSS 101。这并不比你写的难,但它是正确的<代码>绝对定位是不可维护的,因为它使用得越多,文档流中的元素就越多,迫使您继续使用它。在静态页面上,将元素分数设置为
绝对值
,因为您不太清楚,这会适得其反[续]