cari

Rumah  >  Soal Jawab  >  teks badan

javascript - 这种评论表单的布局是怎么做出来的?

这是简书的评论表单:

我的 html 结构如下:

<form action="" method="post">
    <a href="" class="avatar"><img src="images/avatar.jpg" alt=""></a>
    <textarea placeholder="写下你的评论..."></textarea>
    <footer>
        <span>Ctrl + Return 发表</span>
        <button type="reset">取消</button>
        <button type="submit">发送</button>
    </footer>
</form>

我设置头像 .avatar 元素左浮动,然后设置 textarea 的 width=100%,但是这样设置后 textarea 会新起一行,无法达到想要的效果。我想实现简书这样的布局该怎么设置 css 样式?

高洛峰高洛峰2767 hari yang lalu544

membalas semua(4)saya akan balas

  • PHP中文网

    PHP中文网2017-04-17 15:17:36

    = =题主不会照搬其样式么?
    form设置relative,头像设置absolute……

    关键词:绝对定位

    balas
    0
  • 迷茫

    迷茫2017-04-17 15:17:36

    .avatar {
        margin-right: -50px;
        float: left;
    }
    textarea {
        display: block;
        width: 100%;
        margin-left: 50px;
    }

    以上按照你的思路来的,其实要实现这种分栏布局方法有很多种,BFC、absolute、flex 都可以。

    balas
    0
  • 怪我咯

    怪我咯2017-04-17 15:17:36

    <form action="" method="post">

    <p style="width:20%;float:left">
        <a href=""  class="avatar"><img src="images/avatar.jpg" alt=""></a>
    </p>
    <p class="floatRight" style="width:80%;float:right"> 
        <textarea placeholder="写下你的评论..."></textarea>
        <footer>
            <span>Ctrl + Return 发表</span>
            <button type="reset">取消</button>
            <button type="submit">发送</button>
        </footer>
    </p>

    </form>

    balas
    0
  • 怪我咯

    怪我咯2017-04-17 15:17:36

    代码先写4 后写5

    balas
    0
  • Batalbalas