Question

我有这个HTML

        <div class="row">
        <div class="col-md-6" id="temp-box" >
            <img id="weather-icon" src='Icons/sunny.png'></img>
            <span id="temperature">50F</span>
        </div>
        <div class="col-md-6" >  <div class="text-center" id="coodrs-title" ><span>Current Location</span></div>
            <div class="position">
            You Current Latitude Is: <span id="lati"></span><br/>
            You Current Longitude Is: <span id="lngi"></span>
            </div>
        </div>
    </div>

我希望将带有id＃weather-icon的img放在id为#temperature的元素上方，但两者都在同一行内。我怎么能这样做？

Ankit Agarwal给了我最好的解决方案。 Boootstrap的明确课程!!!

Answer 1

您可以嵌套行，如下所示：

<div class="row">
    <div class="col-md-6" id="temp-box">
        <div class="row">
            <img id="weather-icon" src=''>IMAGE</img>
        </div>
        <div class="row"><span id="temperature">50F</span>
        </div>
    </div>
</div>

我不确定这是否是最佳方式，但它确实有效。

Answer 2

更好的解决方案是使用.clear bootstrap类。它将完美地工作

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-md-6" id="temp-box" >
            
            <img id="weather-icon" src='Icons/sunny.png'></img>
            <div class="clear"></div>
            <span id="temperature">50F</span>
        </div>
        <div class="col-md-6" >  <div class="text-center" id="coodrs-title" ><span>Current Location</span></div>
            <div class="position">
            You Current Latitude Is: <span id="lati"></span><br/>
            You Current Longitude Is: <span id="lngi"></span>
            </div>
        </div>
    </div>

＆＃13;

Answer 3

尝试设置：

#weather-icon {
  display: block;
}

目前你有一个img＆amp;彼此相邻的跨度，它们都创建内联框。强制图像拥有自己的一行的一种方法是将其设置为块框元素。至少这是我对其运作方式的理解。

Codepen： http://codepen.io/anon/pen/pjzBRv

Answer 4

查看代码：

 <div class="row">
  <div class="col-md-6" id="temp-box" >
  <img id="weather-icon" src='Icons/sunny.png'></img><br>
 <span id="temperature">50F</span>
  </div>
  <div class="col-md-6" >
 <div class="text-center" id="coodrs-title" ><span>Current Location</span></div> <div class="position"> You Current Latitude Is: <span id="lati"></span><br/> You Current Longitude Is: <span id="lngi">
  </span> 
 </div> 
 </div> 
 </div>

在下一个代码“img”中有“br”。

是否有像CSS清楚的bootstrap属性？

4 个答案: