複数のdivは、改行せずに同じ行に並べられます.

14325 ワード

フロントエンドレイアウト

場合によっては、複数のdivラベルを横方向に並べて改行しない必要がある場合があります.具体的には、次のいくつかの実装方法があります.

1.同級div設定display:inline-block、親div強制改行なし

例:

<html>
<head>head>
<body>
  <div id="container">
    <div class="lable"> div>
    <div class="lable"> div>
    <div class="lable"> div>
    <div class="lable"> div>
    <div class="lable"> div>
  <div>
body>
<style>
  #container {
    width:400px;
    height: 200px;
    background-color: red;
    overflow: auto;
    white-space: nowrap;
  }
  .lable {
    width: 100px;
    background-color: blue;
    display: inline-block;
  }
style>
html>

2.position絶対位置決めにより実現

例:

<html>
<head>head>
<body>
  <div id="container">
    <div id="lable1"> div>
    <div id="lable2"> div>
    <div id="lable3"> div>
    <div id="lable4"> div>
    <div id="lable5"> div>
  <div>
body>
<style>
  #container {
    width:400px;
    height: 200px;
    background-color: red;
    overflow: auto;
    position: relative;
  }
  #lable1 {
    width: 100px;
    margin-left: 0;
    background-color: blue;
    position: absolute;
  }
  #lable2 {
    width: 100px;
    margin-left: 100px;
    background-color: blue;
    position: absolute;
  }
  #lable3 {
    width: 100px;
    margin-left: 200px;
    background-color: blue;
    position: absolute;
  }
  #lable4 {
    width: 100px;
    margin-left: 300px;
    background-color: blue;
    position: absolute;
  }
  #lable5 {
    width: 100px;
    margin-left: 400px;
    background-color: blue;
    position: absolute;
  }
style>
html>

3.flex方式で実現

具体的には、Flexレイアウトチュートリアル:構文編例:

<html>
<head>head>
<body>
  <div id="container">
    <div class="lable"> div>
    <div class="lable"> div>
    <div class="lable"> div>
    <div class="lable"> div>
    <div class="lable"> div>
  <div>
body>
<style>
  #container {
    width:400px;
    height: 200px;
    background-color: red;
    display: flex;
    display: -webkit-flex;
    /*  flex item */
    flex-direction: row;
    /*   flex item ，  */
    flex-wrap: nowrap;
    /* flex item ，  */
    justify-content: flex-start;
    /*   */
    align-items: flex-start
  }
  .lable {
    width: 100px;
    margin-left: 5px;
    background-color: blue;
  }
style>
html>

しかし、これによりflex容器のoverflow属性は機能しなくなる.flexレイアウトでは、すべてのflex itemがflexコンテナ空間を超えずに開発者定義に従ってコンテナ空間を割り当てる.

に注意

親divコンテナのoverflowプロパティのみを設定すると、コンテナ内の要素はinlineまたはinline-blockであり、改行せずに同じ行に積み重ねられず、親コンテナを開くことができません.1行に時間を置くことができないと、自動的に改行されます.
参照1.どのようにfloat要素を親要素のwidthを超えて改行しないように強制しますか?2.複数のdivを改行せずに横に並べる方法

2675

アルゴリズム入門