iT邦幫忙

0

html內容橫向並列

  • 分享至 

  • xImage

我的內容有left list和表格,但目前表格會跑到left list下方,想讓表格是呈現在left list右邊的話該如何修改呢?
Demo如下
https://jsfiddle.net/shawnhsuicpdas/vqv6fy12/2/

目前是設置表格 width: 725px讓他跑到右邊,可是ctrl+滾輪 視窗比例縮小會跑到下方
.
基本上 寬度建議用 百分比 + 最小寬度
然後 左邊 跟表格 用 兩個 DIV 包著
左邊 要多寫幾種展示方法 用 媒體類型去決定要怎麼顯現
例如 樹狀展現,下拉式清單,或是橫列式 清單
如果寫 CSS 不知道 媒體類型,建議去找資料
這是 RWD 的基礎,建議務必要搞懂
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

3
SunAllen
iT邦研究生 1 級 ‧ 2017-03-21 18:22:13

大大您好:

您目前的寫法,如下圖,所以會有「上」「下」之分,因為是2個獨立的DIV,在顯示順序上,就是先讀到先跑出來。
http://ithelp.ithome.com.tw/upload/images/20170321/20006132jTDPhHFoZJ.png
以上圖檔
藍框->DIV
紅框->row
橘框->cell

以下圖檔

http://ithelp.ithome.com.tw/upload/images/20170321/20006132VCuuseopA8.png

但用您的範例,像上圖那樣「左」「右」顯示之後,不知道為什麼「右邊表格」顯示位置會在下面,從JSFiddel裡看不出來。

如果要像您希望的,「左」「右」顯示,那應該是
1.包在同一個DIV裡
2.包在同一個大row裡
3.左邊一個大cell,右邊一個大cell
4.右邊cell裡,再分一個小row
5.小row再分 左cell 和右cell

以下...供您參考

<div id="content">
  <div class="container clearfix">
    <div class="row">  
     <div class="cell1">
    <div id="Main_Left-List">  
      <ul class="clearfix">
        <li><a href="#">a setting</a></li>
        <li><a href="#">b setting</a></li>
        <li><a href="#">c setting</a></li>
        <li><a href="#">d menu</a></li>
      </ul>
    </div>
    </div>
    
    <div class="cell2">
        <div id="DDNStitle">
              <div class="ContainerTitle">Dynamic DNS Setting</div>
            </div>
                <div class="row">
                       <div class="table">
                <div class="cell1">
                  <span class="DNStitle">Service Provider
		 		</span>
                </div>

您好,我是有其他id包再一起了
1.包在content裡
2.包在table裡
因為cell和row我都是用css寫法,跟html table的寫法一樣道理,改寫的參考網頁
https://sofree.cc/css-table/

SunAllen iT邦研究生 1 級 ‧ 2017-03-21 22:39:41 檢舉

Table 也包進去,我沒貼到...待會再傳一次

SunAllen iT邦研究生 1 級 ‧ 2017-03-21 23:10:35 檢舉

http://ithelp.ithome.com.tw/upload/images/20170321/200061324NehS6Ubd6.png
第一段,html

<div id="content">
  <div class="container clearfix">
  
  <div class="row">

  <div class="first_cell"> 
   <div id="Main_Left-List">
      <ul class="clearfix">
        <li><a href="#">a_setting</a></li>
        <li><a href="#">b_setting</a></li>
        <li><a href="#">c_setting</a></li>
        <li><a href="#">d_menu</a></li>
      </ul>
    </div>

	</div>
	<div class="cell2">
    <div id="Main_Center-Content">
      <div class="clearfix">
        <div id="DDNSContainer">
          <div class="container clearfix">
            <div id="DDNStitle">
              <div class="ContainerTitle">Dynamic DNS Setting</div>
            </div>
            <div class="table">
              <div class="row">
                <div class="cell1">
                  <span class="DNStitle">Service Provider
		 		</span>
                </div>

                <div class="cell2">
                  <select class="ServerSelect" style="" onchange="">
                    <option value="" disabled="" selected="">Select your server</option>
                    <option value="noip">NO-IP</option>
                    <option value="changeip">ChangeIP.com</option>
                  </select>
                </div>
              </div>

              <div class="row">
                <div class="cell1">
                  <span class="DNStitle">*ID
		 		    </span>
                </div>
                <div class="cell2">
                  <input type="text" name="DnsUsername" id="DnsUsername">

                </div>
              </div>

              <div class="row">
                <div class="cell1">
                  <span class="DNStitle">*Password
		 		</span>
                </div>
                <div class="cell2">
                  <input type="password" name="DnsPassword" id="DnsPassword">
                </div>
              </div>
              <div class="row">
                <div class="cell1">
                  <span class="DNStitle">*Domain Name
		 		    </span>

                </div>

                <div class="cell2">
                  <input type="text" name="DomainName" id="DomainName">
                </div>
              </div>

              <button type="submit" class="btn btn-agree btn-margin">Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>
		
	 </div><!--cell2結束-->
  </div><!--最上層row結束-->
  
  </div>
  
</div>

第二段,新增一個上層的first_cell css,這個和cell1的差別在,最下面的text-aling: left;

cell1 是text-aling: right;

.first_cell {
  position: relative;
  display: table-cell;
  width: 150px;
  border-right: 1px dotted #fff;
  padding-left: 20px;
  background: #f2f2f2;
  border-bottom: 1px solid #bbbbbb;
  padding: 10px;
  text-align: left;
}

我要發表回答

立即登入回答