如何将锚点垂直对齐到响应式div的右侧？

时间：2017-08-09 19:12:38

标签： html css

我在尝试将按钮与响应式div的右侧对齐时遇到了一些麻烦（我试图让所有html响应）。

我现在所取得的成就是当前的例子：

＆＃13;
＆＃13; 
.container1 {
  background-color: yellowgreen;
  position: relative;
  width: 100%;
  height: 400px;
}

.container1-text1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  -webkit-transform: translate(-105%, -50%);
  -ms-transform: translate(-105%, -50%);
  transform: translate(-105%, -50%);
  background-color: orange;
  padding: 1.2em;
}

.container1-text2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  -webkit-transform: translate(5%, -50%);
  -ms-transform: translate(5%, -50%);
  transform: translate(5%, -50%);
  background-color: fuchsia;
  padding: 1.2em;
}

.custom-button-style {
  float: right;
  color: white;
  padding: 10px 32px;
  background-color: #D0D763;
  border-radius: 8px;
  cursor: pointer;
}
＆＃13; 
<div class="container1">
  <div class="container1-text1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  <div class="container1-text2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  <a href="" target="_blank">
    <div class="custom-button-style">BUTTON TEXT</div>
  </a>
</div>
＆＃13;
＆＃13;
＆＃13;

当前示例的小提琴：http://jsfiddle.net/6zstozwf/

但我想要达到的目的是：

Aligned Button

为了保持简短，我想包装按钮和第二个＆＃34;粉红色/紫红色＆＃34; div包装div，但我没有成功。

2 个答案:

答案 0 :(得分：2)

主要问题是，你的元素是绝对的。这将打破你的布局，特别是在小型设备上。

有一些解决方案。下面的这个主要是display: flex。请参阅代码中的注释以获得解释。

*, *::before, *::after {
  /* changing calculation of box model for all elements */
  box-sizing: border-box;
}

body {
  /* I guess your whole page should be green anyway.
     Otherwise you can put this back to .container1 */
  background-color: yellowgreen;
}

.container1 {
  /* making the container kind of "flexible" */
  display: flex;
  
  /* spread elements from across width but leave a gap between them */
  justify-content: space-between;
  
  /* vertically align elements to the top */
  align-items: flex-start;
  
  /* when elements reach over a 100% wrap them to the next line */
  flex-wrap: wrap;
  
  /* vw means viewport width - similar to % */
  padding: 5vw;
}

/* combine styles for both text elements */
.container1-text1, .container1-text2 {
  width: 40vw;
  padding: 1.2em;
}

.container1-text1 {
  background-color: orange;
}

.container1-text2 {
  background-color: fuchsia;
}

.button-container {
  /* just an element spread to 100% width
     all inline elements should be aligned to the right */
  width: 100%;
  text-align: right;
  
  padding-top: 5vw;
}

.custom-button-style {
  display: inline-block;
  color: white;
  padding: 10px 32px;
  background-color: #D0D763;
  border-radius: 8px;
}
<div class="container1">
  <div class="container1-text1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  <div class="container1-text2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  
  <div class="button-container">
    <a href="" target="_blank" class="custom-button-style">
      BUTTON TEXT
    </a>
  </div>
</div>

答案 1 :(得分：1)

由于你的绝对定位和漂浮，你遇到了麻烦。两者都比它们的价值更麻烦。查看inline-block并保持定位静态，然后您的锚可以正常地在它们下方流动，并与text-align对齐。

* {
  box-sizing: border-box;
}
.container {
  background-color: yellowgreen;
  margin-bottom: 20px;
  text-align: center;
}

.container > div {
  display: inline-block;
  width: 40%;
  margin: 4.5%;
  background-color: orange;
  padding: 1.2em;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: yellowgreen;
  margin-bottom: 20px;
  text-align: center;
}

.container > div {
  display: inline-block;
  width: 40%;
  margin: 4.5%;
  background-color: orange;
  padding: 1.2em;
}

.container > div.text2 {
  background-color: fuchsia;
}

.custom-button-style {
  color: white;
  padding: 10px 32px;
  background-color: #D0D763;
  border-radius: 8px;
  cursor: pointer;
}

.text-right {
  text-align: right;
}


.custom-button-style {
  color: white;
  padding: 10px 32px;
  background-color: #D0D763;
  border-radius: 8px;
  cursor: pointer;
}

.text-right {
  text-align: right;
}
<div class="container"> 
  <div class="text1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  <div class="text2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
</div>
<div class="text-right">
  <a href="" target="_blank">
    <span class="custom-button-style">BUTTON TEXT</span>
  </a>
</div>

Fiddle

相关问题
最新问题