<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          css兩端對齊——div+css布局實現2端對齊的4種方法總結

          時間:?2017-10-28閱讀:?8659標簽:?布局

          div+css布局實現2端對齊是我們網頁排版中經常會使用到的,這篇文章將總結一下可以實現的方法:

          html結構

          實現demo里面的div通過Css進行2端對齊。

          <div class="box">
          	<div class="demo">
          	    <div>1</div>
          	    <div>2</div> 
          	    <div>3</div>
          	</div>
          </div>
          1.margin負值的方式
          該方法需要外面多嵌套一層來實現,通過元素的間距,做為中間層的margin溢出值來實現
          <style>
          .box{
               width:300px;margin:auto;overflow:hidden;border:1px solid #ddd;
          }
          .box .demo{
              margin-left:-10px;width:310px
          }
          .box .demo div{
               width:93.333px;/*(計算:(300-10*2)/3)*/
               float:left;
               margin-left:10px;
          }
          </style>


          2.display:inline-block/text-align:justify方式

          justify方式比較簡單方便。只要一個簡單元素做了聲明,里面的元素就自動等間距兩端對齊布局啦!根本無需計算每個列表元素間的margin間距,更不用去修改父容器的寬度。

          注意一點:demo結構內元素必須存在【換行符】或【空格符】,否則直接連著寫將不會生效

          <style>
          .demo{
               margin:0;padding:0;
               text-align:justify;
               text-align-last:justify;/*解決IE的支持*/
               line-height:0;/*解決標準瀏覽器容器底部多余的空白*/
          }
          @media all and (-webkit-min-device-pixel-ratio:0){
            .demo{
               font-size:0;/*webkit清除元素中使用[換行符]或[空格符]后,最后元素多余的空白*/
            }
          }
          .demo:after{/*text-align-last:justify只有IE支持,標準瀏覽器需要使用 .demo:after 偽類模擬類似效果*/
               display:inline-block;
               overflow:hidden;
               width:100%;
               height:0;
               content:'';
               vertical-align:top;/*opera瀏覽器解決底部多余的空白*/
          }
          .demo div{
               width:20%;
               display:inline-block;
               text-align:center;/*取消上層元素的影響*/
               text-align-last:center;
               font-size:12px;
          }
          </style>
          3.css3 屬性 space-between

          該方法基于webkit內核的webapp開發和winphone IE10及以上,常用于移動端布局。

          <style>
          .demo{
              display:-webkit-box;
              display:-webkit-flex;
              display:-ms-flexbox;
              display:flex;
              -webkit-box-pack:justify;
              -webkit-justify-content:space-between;
              -ms-flex-pack:justify;
              justify-content:space-between;
          }
          
          .demo div{
               width:30%; 
          }
          </style>
          4.css3屬性column-count

          column屬性是多列布局,使用column來實現兩端對齊只需要設置模塊的個數跟column的列數一致即可,推薦使用于移動端布局

          <style>
          .demo{
               -webkit-column-count:3;-moz-column-count:3;column-count:3;
               -webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px; 
          }
          
          .demo div{
               
          }
          </style>

          完結~~~~~有更好的實現請留言哦

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/24

          移動WEB開發-響應式布局

          響應式開發原理就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設置,從而適配不同設備的目的。響應式需要一個父級做為布局容器,來配合子級元素來實現變化效果。

          CSS五種方式實現 Footer 置底

          頁腳置底(Sticky footer)就是讓網頁的footer部分始終在瀏覽器窗口的底部。當網頁內容足夠長以至超出瀏覽器可視高度時,頁腳會隨著內容被推到網頁底部;但如果網頁內容不夠長,置底的頁腳就會保持在瀏覽器窗口底部。

          CSS三種布局模型是什么?

          在網頁中,元素有三種布局模型:流動模型(Flow) 默認的、浮動模型 (Float)、層模型(Layer)。下面我們來看一下這三種布局模型。

          響應式布局和自適應布局詳解

          自適應布局給了你更多設計的空間,因為你只用考慮幾種不同的狀態。而在響應式布局中你卻得考慮上百種不同的狀態。雖然絕大部分狀態差異較小,但仍然也算做差異。它使得把握設計最終效果變得更難,同樣讓響應式布局更加的難以測試和預測

          前端響應式布局

          Responsive design,意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

          CSS 高級布局技巧

          隨著 IE8 逐漸退出舞臺,很多高級的 CSS 特性都已被瀏覽器原生支持,再不學下就要過時了。

          彈性(Flex)布局的使用

          最近我參與實施的兩個項目中,一個頁面交互復雜,而另一個相對傳統,兩個項目相比之下凸顯出了頁面布局樣式的時間占比不可忽視,使用了彈性布局代碼量精簡了不少

          CSS:BFC規則的應用自適應兩欄布局

          兩欄布局是寫頁面時經常用到的,要想實現兩欄布局,就需要明白BFC規則,Block formatting context,直譯為“塊級格式化上下文”,可以簡單的理解它為一個獨立的區域,把區域內部元素與外部元素區分開,兩者互不干擾。

          css怎么讓文字豎著排列?

          css可以使用css樣式writing-mode:tb-rl來設置文字豎著排列。writing-mode屬性設置或檢索對象的內容塊固有的書寫方向。

          css3 彈性盒布局的使用-Flex

          css3 的Flex彈性盒的布局是一個用于頁面布局的全新CSS3模塊功能。它可以把列表放在同一個方向(從左到右或從上到下排列),并且讓這些列表能延伸到占用可用的空間。較為復雜的布局可以通過嵌套一個伸縮容器

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网