Question

我在两个页面上固定一些文本时遇到了问题。我在左侧有一个盒子，上面有一些文字，在右侧有两个MDL卡，其中包含对话。

我的问题是，一旦我在CSS中为文本放置了固定位置字词，我的卡片就会与它重叠并重新向左对齐。我试图遏制它们，但这似乎没有任何帮助，也许我做错了什么。

我喜欢它现在的样子，但是我希望MDL卡独立滚动。再说一次，可能是一个简单的修复程序，而我却忽略了一些东西，但这是我到目前为止的事情：

 <div class="mdl-layout__content">

        <main>

          <div class="boxed-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
            Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae.
            Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem,
            et pretium dui ante ac lectus.
          </div>

          <div class="cards">


            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text"></h2>
              </div>
              <div class="mdl-card__supporting-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
              </div>
              <div class="mdl-card__actions mdl-card--border">
                  <button class="mdl-button mdl-button--raised mdl-js-button dialog-button">View Product</button>

                  <dialog id="dialog" class="mdl-dialog">
                      <h3 class="mdl-dialog__title">Product 1</h3>
                      <div class="mdl-dialog__content">
                        <p>
                          This is an example of the Material Design Lite dialog component.
                          Please use responsibly.
                        </p>
                      </div>
                      <div class="mdl-dialog__actions">
                        <button type="button" class="mdl-button">Close</button>

                      </div>
                    </dialog>
           </div>

              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
            </div>

            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text"></h2>
              </div>
              <div class="mdl-card__supporting-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
              </div>
              <div class="mdl-card__actions mdl-card--border">
                  <button class="mdl-button mdl-button--raised mdl-js-button dialog-button-1">View Product</button>

                  <dialog id="dialog-1" class="mdl-dialog">
                      <h3 class="mdl-dialog__title">Product 2</h3>
                      <div class="mdl-dialog__content">
                        <p>
                          This is an example of the Material Design Lite dialog component.
                          Please use responsibly.
                        </p>
                      </div>
                      <div class="mdl-dialog__actions">
                        <button type="button" class="mdl-button">Close</button>

                      </div>
                    </dialog>

              </div>
              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
            </div>
          </div>
        </div>
      </div>

        </main>

CSS：

 .boxed-1{
      width: 40%;
      height: auto; 
      text-align: justify;
      display: flex;
      /* position: fixed; */
      vertical-align: center;
      padding: 15px;
      margin: 20px;
      background-color: #fff;
      font-family: 'Courier New', Courier, monospace;
    }

    .mdl-layout__content main {
    display: flex;
    align-items: right;
    }

     .demo-card-wide.mdl-card {
      width: 100%;
      /* margin-left: 90%; */
      font-family: 'Courier New', Courier, monospace;
      /* position: relative; */
    }

    .demo-card-wide > .mdl-card__title {
      color: #cccccc;
      height: 430px;
      background: url('images/placeholder.jpg') 0px;

    }

    .demo-card-wide > .mdl-card__menu {
      color: #fff;
    }

Answer 1

您的.boxed-1和.cards元素在您的Flex布局的左右部分保留了空间，因此将.boxed-1更改为position: fixed会破坏布局。在不改变当前方法的情况下，简单的解决方法是将文本包装在另一个div中并将其设置为position: fixed，因此.boxed-1仍然可以在Flex布局和新的div可防止文本滚动。您将需要一些额外的CSS，以确保新的div不与其他元素重叠。

示例HTML：

<main>
  <div class="boxed-1">
    <div class="fixed">
      Lorem ipsum...
    </div>
  </div>
  <div class="cards">
    <!-- cards html -->
  </div>
</main>

示例CSS：

main {
  display: flex;
}

.boxed-1 {
  width: 30vw;
  background-color: #fff;
  font-family: 'Courier New', Courier, monospace;
  text-align: justify;
}

.cards {
  width: 70vw;
}

.fixed {
  position: fixed;
  top: 20px;
  left: 20px;
  width: calc(30vw - 40px);
}

布局：左侧为固定的文本框，右侧为可滚动的MDL卡

1 个答案: