html - 在响应式布局方法中将 html 元素内联

Question

我想以图像中的特定方式放置图像、箭头、标题和输入文本框。

1. 将 STLye 标签放入 hr或 td不是很好的做法，对吧？它甚至没有帮助
2. 在tr之间保持空间只有<br/>有可能的选择或任何更好的方法吗？
3. 如何在不使用 &nbsp 的情况下保持箭头、标题、文本框之间的空间

fiddle :http://jsfiddle.net/karimkhan/u7AjH/2/

我想显示这样的内容:

CSS:

.content > .container {height: 100%;}
.img-container1 { float:left; height:80% !important; width:40%}     

Answer 1

http://jsfiddle.net/u7AjH/4/

<div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-6">
                <img src="http://placehold.it/931x754"  alt="..." class="img-responsive img-rounded" />
            </div>
            <div class="col-xs-6 col-md-6">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-xs-4 col-md-4">
                            =>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <input type="text" class="form-control"/>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            Text Here
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-xs-4 col-md-4">
                            =>
                        </div>
                        <div class="col-xs-4 col-md-4" >
                            <textarea style="height:200px" type="text" class="form-control"></textarea>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            Text Here
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-xs-4 col-md-4">
                            =>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            <input type="text" class="form-control"/>
                        </div>
                        <div class="col-xs-4 col-md-4">
                            Text Here
                        </div>
                    </div>
                </div>                  
         </div>
     </div>    
</div>

虽然不是很好，因为我刚刚做了，但我认为它可以帮助你。

您可以使用 bootstap 的网格系统来制作响应式网格。

查看此文档，您将了解有关 Bootstrap 的更多信息。

http://getbootstrap.com/css/#grid

希望对您有所帮助。