Question

我有一些html代码用于具有4个输入然后是文本区域的表单使用bootstrap

我想要的是将图像放在两个div的右边而不将它们中的一个向下移动我希望它看起来像所附的图像任何一个例子都会非常感激

图片下面的代码：第一个是我想要的，第二个是我得到的

<body>
    <div class="col_1">
        <h1></h1>
    </div>    

        <div class="container">
            <div class="row">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label class="control-label col-xs-4">Name: </label>
                        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                            <input type="text" class="form-control required"/>
                        </div>
                        <img src="Micro%20Pooh.jpg" height="112" width="112" class="image-responsive" />
                    </div>


                    <div class="form-group">
                        <label class="control-label col-xs-4">Facial Expression: </label>
                        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                            <input type="text" class="form-control required" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-4">Awesome comment: </label>
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            <textarea rows="5" class="form-control"></textarea>
                        </div>
                    </div>


                </form>
            </div>
        </div>

    <div class="col_3">
        <h1></h1>
    </div>

what i want

what I actually have

Answer 1

您可以使用包含两个单元格的表格。将input字段放在左侧单元格中，将图像放在右侧单元格中。像这样：

<input type="text" style="width:95%" /><br /><br />
<input type="text" style="width:95%" /><br /><br />
<table>
    <tr>
        <td><input type="text" style="width:95%" />
            <br />
            <br />
            <input type="text" style="width:95%" />
        </td>
        <td><img src="http://icons.iconarchive.com/icons/martin-berube/people/256/baby-icon.png" /></td>
    </tr>
</table>
<br />
<textarea style="width:95%"></textarea>

如何插入图像内联与div而不降低以下div

1 个答案: