如何“漂浮”一个div

Question

我知道你可以左右浮动一个div，但为什么没有一个属性可以让你“浮动”一个div上下？在这种情况下，我想把我的.imgBt“向下”浮动，所以它被粘在模态的底部，但是无法找到实现这个目标的方法。我已经做了一些关于div的绝对和固定位置的研究，并且稍微弄清楚了这一点，但仍然无法做到正确。

这是我的代码。

.contentThree {
  padding-top: 70px;
  background: linear-gradient(to bottom right, #3d3d3d, #191919);
}

.contentThree p {
  padding-bottom: 10px;
}

.photoBG span {
  font-size: 2em;
  letter-spacing: 2px;
}

.faaApproved p {
  color: white;
}

.photoBG {
  margin-top: 70px;
}

.paypal {
  padding-left: 100px;
}

.paymentBtn1 {
  padding-top: 10px;
}

.imgText {
  color: white;
  font-size: .8em;
  font-weight: 100;
  padding-top: 5px;
}

.button,
select {
  width: 100%;
}

.mDialogPhoto {
  width: 95%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.modal-body {
  padding: 0px;
}

.modal-backdrop.in {
  opacity: 0.8;
}

.modal-content {
  background-color: white;
}

.img-responsiveModal {
  margin-top: 20px;
  margin-bottom: 40px;
  display: block;
  width: 100%;
  height: auto;
}

.modal-dialog {
  margin-top: 50px;
}

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog mDialogPhoto" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container-fluid parent">
          <div class="col-sm-6 modal3ImgPrev">
            <img class="img-responsiveModal" id="myImg2" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
          </div>
          <center>
            <form class="paypalForm col-sm-6" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
              <input type="hidden" name="cmd" value="_s-xclick">
              <input type="hidden" name="hosted_button_id" value="NECDG667FLEEY">
              <table>
                <tr>
                  <td><input type="hidden" name="on0" value="Choose Size">Choose Size</td>
                </tr>
                <tr>
                  <td><select name="os0">
                                    	<option value="1x1">1x1 $100.00 USD</option>
                                    	<option value="2x2">2x2 $200.00 USD</option>
                                    	<option value="3x3">3x3 $300.00 USD</option>
                                    	<option value="4x4">4x4 $400.00 USD</option>
                                    </select> </td>
                </tr>
                <tr>
                  <td><input type="hidden" name="on1" value="Choose Material">Choose Material</td>
                </tr>
                <tr>
                  <td><select name="os1">
                                    	<option value="Metal">Metal </option>
                                    	<option value="Acrylic">Acrylic </option>
                                    	<option value="Canvas">Canvas </option>
                                    </select> </td>
                </tr>
                <tr>
                  <td><input type="hidden" name="on2" value="Choose Mount">Choose Mount</td>
                </tr>
                <tr>
                  <td><select name="os2">
                                    	<option value="Mount 1">Mount 1 </option>
                                    	<option value="Mount 2">Mount 2 </option>
                                    	<option value="Mount 3">Mount 3 </option>
                                    </select> </td>
                </tr>
              </table>
              <input type="hidden" name="currency_code" value="USD">
              <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
              <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
            </form>
          </center>
          <div class="imgBtns">
            <a onclick="document.getElementById('myImg2').src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'"><img class="col-sm-2 col-xs-4 img-responsive" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' /></a>
            <a onclick="document.getElementById('myImg2').src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'"><img class="col-sm-2 col-xs-4 img-responsive" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg' /></a>
            <a onclick="document.getElementById('myImg2').src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'"><img class="col-sm-2 col-xs-4 img-responsive" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg' /></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

对齐元素的最佳方法是Flexbox Here Flexbox

您无法使用float调整垂直对齐。

<!DOCTYPE html>
<html>
    <head>
    <title>test</title>
	<style>	
        #container{
			display: flex;
			height: 100vh;
			width: 100vw;
			background-color: pink;
		}	
		
		#first{
			display: flex;
			height: 100vh;
			width: 30vw;		
		}
		
		#other{
			display: flex;
			height: 100vh;
			width: 70vw;
			background: antiquewhite;
			flex-wrap: wrap;
		}
		
		#div1{
			display: flex;
			align-self: flex-start;		
			width: 100%;
			height: 50px;
			background-color: aquamarine;			
		}
		
		#div2{
			background-color: aquamarine;
			align-self: flex-end;		
			width: 100%;
			display: flex;
			height: 50px;			
		}
	</style>
    </head>

    <body>
        <div id="container">
                <div id="first">first</div>
                <div id="other">
                  <div id="div1">div1</div>
                  <div id="div2">div2</div>
                </div>
        </div>
    </body>
</html>

Answer 2

鉴于你的模态有position:relative，只需将以下内容添加到想要浮动的div中：

.divThatNeedsToBeFloatedDown {
position:absolute;
bottom:0;
}

或分别：

.divThatNeedsToBeFloateUp {
position:absolute;
bottom:0;
}