Html css 内联块和引导网格系统输出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26441642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css inline-blocks and bootstrap grid system output
提问by SidAhmed
I'm trying to have a specific HTMLmarkup of my divs using cssand bootstrap 3.2. The image below demonstrates the result I want to get.
我正在尝试HTML使用css和对我的 div 进行特定标记bootstrap 3.2。下图展示了我想要得到的结果。
I've used the bootstrap grid system so that my page would be responsive and properly displayed in small screen devices. This is the code I've tried. And I used http://www.bootply.comto test it.
我使用了引导网格系统，以便我的页面能够响应并在小屏幕设备中正确显示。这是我试过的代码。我使用http://www.bootply.com来测试它。
Any ideas how to get the markup ?
任何想法如何获得标记？
<div>
<div style="display:inline-block; border:1px solid gray; width:150px; height:150px;">
<img src='' alt="image go here !"/>
</div>
<div class="container-fluid" style="display:inline-block;">
<div class="row" style="border:1px solid gray;">
<div class="col-md-9">This is the product name</div>
<div class="col-md-3 text-right">1 230.99</div>
</div>
<div class="row" style="display:inline-block; border:1px solid gray;">
<div class="col-md-6">Property 1</div>
<div class="col-md-6">Property 2</div>
</div>
</div>
</div>
The desired result :
想要的结果：
EDIT : The result I get :
编辑：我得到的结果：
回答by Tim
I've created a Bootply for you.
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="img">
<img src="">
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-8">
This is the product name
</div>
<div class="col-md-4">
1 230.99
</div>
</div>
<div class="row">
<div class="col-md-6">
Property 1
</div>
<div class="col-md-6">
Property 2
</div>
</div>
</div>
</div>
</div>
