左右2組內容如何對稱? (HTML CSS)

html css

nick12345 2021-11-16 16:17:25 ‧ 831 瀏覽

分享至

我想做到title1 和 content1是對稱的，如果content1太長掉下去，title1也會一齊掉下去。

 <div class="Content">
            <div class="leftContent">
                <div>title1</div>
                <div>title2</div>
                <div>title3</div>
                <div>title4</div>
                <div>title5</div>
                <div>title6</div>
            </div>

            <div class="rightContent">     <div>content1content1content1content1content1content1content1content1</div>
                <div>content2</div>
                <div>content3</div>
                <div>content4</div>
                <div>content6</div>
                <div>content7</div>
            </div>
        </div>

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2021-11-16 16:22:42 檢舉

你把title跟相對應的content綁在一起，都給固定寬度不就好了?

nick12345 iT邦新手 4 級 ‧ 2021-11-16 16:25:13 檢舉

但我左邊title要靠右，右邊內容要靠左展示，綁在一起應該不做到這個效果，如果給了width，responsive後不就會跳出框嗎?

nick12345 iT邦新手 4 級 ‧ 2021-11-16 16:28:36 檢舉

<div class="Content"> 我是用了display:flex

Hankz iT邦新手 2 級 ‧ 2021-11-16 16:32:10 檢舉

用table做?

nick12345 iT邦新手 4 級 ‧ 2021-11-16 16:33:16 檢舉

不用TABLE，我試到了，title1和content1 一齊，title2和content2 一齊就可以了。

Mao iT邦新手 1 級 ‧ 2021-11-16 18:15:51 檢舉

可以用 flexbox 來實作，同一個 title 與 content 放一起，使用 `display: flex;`，他就會橫過來，再給子元件各下 `width: 50%;`，就會跟著視窗彈性收縮。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Hankz

iT邦新手 2 級 ‧ 2021-11-16 16:44:45

可以用table

HTML：

<table>
  <tr>
    <td>title1</td>
    <td>content1content1content1content1content1content1content1content1</td>
  </tr>
  <tr>
    <td>title2</td>
    <td>content2</td>
  </tr>
  <tr>
    <td>title3</td>
    <td>content3</td>
  </tr>
  <tr>
    <td>title4</td>
    <td>content4</td>
  </tr>
</table>

CSS：

td{
  vertical-align:text-top;
  word-break: break-all;
  vertical-align:text-top;
}
tr > td:nth-child(1) {
  text-align:right;
}

tr > td:nth-child(2) {
  text-align:left;
  max-width: 150px;
}

DEMO

回應
分享
檢舉

登入發表回應

froce

iT邦大師 1 級 ‧ 2021-11-17 08:36:05

<div class="row">
    <div class="title">title1</div>
    <div class="content">content1content1content1content1content1content1content1content1</div>
</div>
  
  
<style>
  .row{
    display: flex;
    align-items:center;
  }
  
  .row>.title{
    margin: 20px;
    width: 20%;
  }
  .row>.content{
    word-break: break-all;
  }
</style>

https://jsbin.com/jodowohasu/edit?html,output

flexbox比較好用。而且table排版對於HTML5來說語意是不符的。