html - 不同分辨率下的文本区域位置

Question

我有一份实习作业，我必须从一张图片中复制一个网页。这是他们的照片，旁边是我目前得到的照片:image+image

当分辨率较高时，我不知道如何将那些 textarea 放在文本附近。在 1024x768(这是最低要求)下它看起来不错，但是当我最大化窗口时，会发生这种情况。 :/

这是代码:jsfiddle .我不确定，但有人可以帮忙吗？ 干杯!

Answer 1

好吧，我试着 hackish 解决 hackish。

因为:

• 你有 <textarea>在 <p> 里面.
• 我把它们拿出来放了一个div周围。
• 文本区域有 float: right内联，和 float: left在样式表中。由于specificity，内联获胜.
• float 不会给父容器一个高度(没有“clearfix”)所以我采用了
  display: inline-block .

我尝试用以下方法解决它:

p.label {
display: inline-block;
vertical-align: top;
position: relative;
top: -10px;
}

.intro {
width:82%;
display: inline-block;
background-color:#fff;
text-align: right;
margin-right: 0.5em;
}

话虽如此，我仍然保留着 12"笔记本电脑屏幕，但不知道它是否有效以及您是否喜欢。请给我一个机会，如果有的话不工作。

JSFIDDLE:http://jsfiddle.net/jQmM4/1/