2017-01-16 63 views
0

如果窗口大小調整文本「自動推送」並且button被推下。 button已遍佈全國。我希望它們在爲不同視口調整窗口大小時始終處於相同位置。如何確保按鈕保持在同一高度,同時調整文本大小?

section { 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    display: inline-flex; 
 
    width: 100%; 
 
} 
 
section article { 
 
    position: relative; 
 
    background-color: white; 
 
    width: 30%; 
 
    margin: 1em; 
 
} 
 
section article p { 
 
    max-width: 30em; 
 
    color: black; 
 
    font-size: 1em; 
 
} 
 
section article button { 
 
    color: white; 
 
    padding: 0.5em 0.5em; 
 
    text-align: center; 
 
    background-color: #F6861F; 
 
} 
 
/* Tablet size*/ 
 

 
@media screen and (max-width: 67em) { 
 
    section article { 
 
    width: 40%; 
 
    } 
 
    /* Mobile Size formulier. */ 
 
    @media screen and (max-width: 40em) { 
 
    section article { 
 
     width: 95%; 
 
    }
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
</head> 
 

 

 
<section> 
 
    <article> 
 
    <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae 
 
     sapien ut libero venenatis faucibus.</p> 
 
    <a href=""> 
 
     <button>Test</button> 
 
    </a> 
 
    <a href=""> 
 
     <button>Test</button> 
 
    </a> 
 
    </article> 
 

 

 
    <article> 
 

 
    <p> 
 
     Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum 
 
     nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id 
 

 
    </p> 
 
    <a> 
 
     <button>Test</button> 
 
    </a> 
 
    <a> 
 
     <button>Test</button> 
 
    </a> 
 
    </article> 
 

 
    <article> 
 

 
    <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum 
 
     primis in faucibus orci luctus et</p> 
 
    <a> 
 
     <button>Test</button> 
 
    </a> 
 
    <a> 
 
     <button>Test</button> 
 
    </a> 
 
    </article> 
 

 
    <article> 
 

 

 
    <p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, 
 
     sem libero volutpat nibh, nec pellente</p> 
 
    <button>Test</button> 
 
    <button>Test</button> 
 
    </article> 
 

 

 
    <article> 
 

 

 
    <p>Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. 
 
     Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh.</p> 
 
    <a href=""> 
 
     <button>Test</button> 
 
    </a> 
 
    <a> 
 
     <button>Test</button> 
 
    </a> 
 

 
    </article> 
 

 
    <article> 
 

 

 
    <p>Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut leo. Ut 
 
     a nisl id ante tempus hendrerit. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue au</p> 
 
    <a> 
 
     <button>Test</button> 
 
    </a> 
 
    <a> 
 
     <button>Test</button> 
 
    </a> 
 
    </article> 
 

 

 

 

 

 

 
    </body> 
 

 

 

 
    </html>

回答

0

你應該換按鈕進入一些容器,我會用這樣的:

<article> 
     <p>Long lorem ipsum text goes here...</p> 
     <div class="actions"> 
      <a href=""> 
       <button>Test</button> 
      </a> 
      <a href=""> 
       <button>Test</button> 
      </a> 
     </div> 
</article> 
<article>....</article> 

然後加入CSS的幾行對那些頂部您已經擁有:

.actions { 
     display: flex; 
     align-self: flex-end; 
    } 
section article { 
     position: relative; 
     background-color: white; 
     width: 30%; 
     margin: 1em; 

     /* added style */ 
     display: flex; 
     flex-direction: column; 
     flex-flow: inherit; 
    } 

而對於非常大的顯示器I會刪除一行css:

section article p { 
     /* -- if You whant to make some limits make it on all section  or at least on article */ 
     /*max-width: 30em;*/ 
     color: black; 
     font-size: 1em; 
    } 
相關問題