在 HTML 中对齐文本框



如何对齐文本框,在HTML页面的左侧或右侧?

我们都知道如何将图片向右对齐。但是,如何创建一个文本框(带有边框和不同的背景颜色(,以及如何将此文本框集成到段落中,以便正文文本使用特定的填充绕过文本框?

我们都知道如何将图片向右对齐。

以上有点冒昧。

我同意你的问题需要你尝试过的例子。它还需要明确您的要求。我假设下面的代码是你所追求的。

此示例使用浮点数,这将导致您提到的包装效果,但是对于与此类似的布局,我会仔细看看 CSS Grid。

section {
  width: 600px;
  height: auto;
}
p {
  display: block;
}
#funky {
  background: pink;
  padding: 1rem;
  margin-left: 1rem;
  border: 3px dashed;
  width: 200px;
  height: 150px;
  overflow-y: scroll;
  float: right;
  display: inline;
}
<section>
  <p id="main">
    <div id="funky">
      Aliquam erat volutpat. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer
    </div>
    Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Nam at tortor in tellus interdum sagittis. Morbi vestibulum volutpat enim. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Sed in libero ut nibh placerat accumsan. jfdkjfd fdsjlfdsj Aliquam lobortis. Vivamus consectetuer hendrerit lacus. Vivamus euismod mauris. Vivamus euismod mauris. Fusce vulputate eleifend sapien. Vivamus euismod mauris. Vivamus euismod mauris. Fusce vulputate eleifend sapien. Vivamus euismod mauris. Vivamus euismod mauris. Fusce vulputate eleifend sapien. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi.
  </p>
</section>

使用div并为其分配float: leftright(与浮动图像相同(,以及不让它跨越整个页面的宽度设置(百分比或像素(

最新更新