Question

我开发了bootstrap asp.net mvc。我有一个元素，我想放在另一个元素的右下角。我像这样调整它

HTML

<div class="container-fluid" style="vertical-align:middle; position:center;">
    <div class="row" style="vertical-align:middle; position:center;">
        @Html.DevExpress().ImageSlider(s =>
   {
       s.Name = "ImageSlider1";
       s.Width = Unit.Percentage(100);
       s.Height = Unit.Pixel(400);

       s.SettingsImageArea.ImageSizeMode = ImageSizeMode.FillAndCrop;
       s.SettingsImageArea.NavigationButtonVisibility = ElementVisibilityMode.OnMouseOver;
       s.SettingsImageArea.EnableLoopNavigation = true;
       s.SettingsImageArea.AnimationType = AnimationType.Slide;
       s.SettingsImageArea.NavigationDirection = NavigationDirection.Vertical;
       s.SettingsNavigationBar.Position = NavigationBarPosition.Left;
       s.SettingsNavigationBar.PagingMode = NavigationBarPagingMode.Single;
       s.SettingsNavigationBar.Mode = NavigationBarMode.Thumbnails;



   }).BindToFolder("~/Content/Images/widescreen").GetHtml()


            <div id="countdown" style=" margin-top:62%; margin-right:3%;" >
                <div id='tiles'></div>
                <div class="labels">
                    <li>days</li>
                    <li>Hours</li>
                    <li>Min</li>
                    <li>Seconds</li>
                </div>
            </div>

        </div>
    </div>

CSS中的

    #countdown{
    width: 230px;
    height: 72px;
    position: relative-to first-sibling(.row); 
    bottom: 2px; 
    right: 2px;
    text-align: center;
    background: #222;
    background-color: transparent;
    /*background-image: -webkit-linear-gradient(top, #f7530a, #e6a815, #e6a815, #f7530a);*/ 
    background-image: -webkit-linear-gradient(top, green,#fff, #fff, green);
    background-image:    -moz-linear-gradient(top, #222, #333, #333, #222);
    background-image:     -ms-linear-gradient(top, #222, #333, #333, #222);
    background-image:      -o-linear-gradient(top, #222, #333, #333, #222);
    border: 1px solid #111;
    border-radius: 5px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
    margin: auto;
    padding: 24px 0 2px 0;
    position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

好像这张照片好。但我希望这个元素修复到该元素的右下方，即使窗口大小减少或改变

enter image description here

Answer 1

定位元素，使其始终位于其容器的右下角。您可以在容器上使用position relative，并在子项上使用absolute。这将使孩子相对于容器绝对定位。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

Answer 2

像这样使用css

  .parent{
      position: relative;
    }
     .parent #countdown{
       position: absolute;
       bottom: 0;
       right: 0;   
     }

请记住，没有像 position：center; 这样的css属性。从#countdown div

中删除margin-top和margin-right属性

如何通过CSS和BootStrap

2 个答案: