Question

您好我有一些问题要让元素在面板上方定位。

这就是我现在所拥有的： https://jsfiddle.net/tn8b82u9/11/

＆＃13;

.main_container {
  margin-top: 15px;
}

.col-lg-12 {
  width: 50%;
  margin: auto;
}

#logo_1 {
  position: absolute;
  top: 0;
  left: 0;
}

#logo_2 {
  position: absolute;
  top: 0;
  right: 0;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="main_container">
  <div id="logo_1">
    <img src="http://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc06a8e4b043168701253c/1466862019287/?format=1000w" />
  </div>
  <div id="logo_2">
    <img src="http://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc06a8e4b043168701253c/1466862019287/?format=1000w" />
  </div>
  <div id="notice" class="row">
    <div class="col-lg-12">
      <div id="user_form" class="panel panel-warning">
        <div class="panel-heading">Notice</div>
        <div class="panel-body">
          <div class="col-md-12">Hello there !</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- row -->

＆＃13;

我想要的是第一个黑盒子应该在面板的左上角，第二个黑盒子在面板的右角。这是一张让事情变得清晰的图片：

Answer 1

编辑：

从@drew-kennedy
清除css
https://jsfiddle.net/tn8b82u9/14/

试试这个：

HTML：

<div class="main_container">
  <div class="row top-logos">
      <div class="col-lg-12 clear">
      <div id="logo_1">
    <img src="http://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc06a8e4b043168701253c/1466862019287/?format=1000w" />
  </div>
  <div id="logo_2">
    <img src="http://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc06a8e4b043168701253c/1466862019287/?format=1000w" />
  </div>
  </div>
  </div>
  <div id="notice" class="row">
    <div class="col-lg-12">
      <div id="user_form" class="panel panel-warning">
        <div class="panel-heading">Notice</div>
        <div class="panel-body">
          <div class="col-md-12">
            Hello there !
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- row -->

CSS：

.main_container {
  margin-top: 15px;
}

.col-lg-12 {
  width: 50%;
  margin: auto;
}

#logo_1 {
  float: right;
}

#logo_2 {
  float: left;
}

.clear:before, .clear:after{
  content: '';
  display: block;
  clear: both;
}

.top-logos{
  margin-bottom: 15px;
}

工作示例：https://jsfiddle.net/tn8b82u9/13/

HTML / CSS - 如何将图像定位在面板的左上角

1 个答案: