个人中心
gpt4 book ai didi

html - 由于文本换行 (css)，Div 位置发生了变化

转载 作者：行者123 更新时间：2023-11-28 07:43:35 25 4
gpt4 key购买 nike

我有一个如下所示的布局，用于在各个 div 中显示图片和文本。我这里的问题是，当文本太长时，div 的位置发生了变化，看起来不太好。

例如，您可以运行下面的代码片段，看到带有文本“Trellis Combined Line Chart”的 div，您会发现由于文本太长，它的位置发生了移动。 p>

你有解决这个问题的方法吗？非常感谢!

附言我认为下面你需要关心的样式只有“pic_small_container”、“pic_small”和“demo_illus”。 

.overallPanel1 {
    border-width: 1px;
    border-color: #BDBDBD;
    margin: 1.875em 0 3.75em 4.065em;
}

.pic_small {
    border: solid;
    border-width: 1px;
    border-color: #BDBDBD;
    width: 12.5em;
    height: 10.4em;
}

.pic_small_container {
    text-align: center;
    padding: 0 4em 4.375em 0;
    display: inline-block;
}

.demo_illus {
    text-decoration: none;
    font-family: 'Arial';
    font-weight: 200;
    font-style: normal;
    font-size: 0.875em;
    color: #3498DB;
}

.overview_page_title {
    text-decoration: none;
    font-family: 'Calibri';
    font-weight: 700;
    font-style: normal;
    font-size: 1.1em;
    margin-left: 1.875em;
}

.overview_chart_title {
    text-decoration: none;
    font-family: 'Calibri';
    font-weight: 500;
    font-style: normal;
    font-size: 1.1em;
    
}

.picPanel {
    margin-top: 1.125em;
}
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>Chart Demo Overview</title>
    <link href="resources/demoStyle.css" rel="stylesheet">
</head>

<body>
    <div style="margin-top: 0.9em">
        <a class="overview_page_title">Demo Overview</a>
        <div class="overallPanel1">
            <a class="overview_chart_title">Trellis</a><br>
            <div class="picPanel">
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_bar">Trellis Chart</a>
                </div>
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_stacked_bar">Trellis Stacked Bar Chart</a>
                </div>
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_line">Trellis Line Chart</a>
                </div>
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_pie">Trellis Pie Chart</a>
                </div>
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_donut">Trellis Donut Chart</a>
                </div>
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_combination">Trellis Combined Column Line Chart</a>
                </div>
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_horizontal_combination">Trellis Combined Bar Line Chart</a>
                </div>
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_bubble">Trellis Combined Bubble Chart</a>
                </div>
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_scatter">Trellis Combined Scatter Chart</a>
                </div>
                <div class="pic_small_container">
                    <img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
                    <a class="demo_illus" href="index.html?chartType=trellis_area">Trellis  Area Chart</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

最佳答案

您好，这是您的答案，CSS 的变化不大。

找到css代码中提到的注释

.pic_small {
  border: solid;
  border-width: 1px;
  border-color: #BDBDBD;
  width: 12.5em;
  height: 10.4em;
}
.pic_small_container {
  text-align: center;
  padding: 0 4em 4.375em 0;
  display: inline-block;
  /*This will do the magic you want*/
  vertical-align: top;
}
.demo_illus {
  text-decoration: none;
  font-family: 'Arial';
  font-weight: 200;
  font-style: normal;
  font-size: 0.875em;
  color: #3498DB;
  /* Overflow hidden. Width is only applicable to <a> if you add property display:block; or display:inline-block; */
  overflow: hidden;
  width: 12.5em;
  display: block;
}
.overview_page_title {
  text-decoration: none;
  font-family: 'Calibri';
  font-weight: 700;
  font-style: normal;
  font-size: 1.1em;
  margin-left: 1.875em;
}
.overview_chart_title {
  text-decoration: none;
  font-family: 'Calibri';
  font-weight: 500;
  font-style: normal;
  font-size: 1.1em;
}
.picPanel {
  margin-top: 1.125em;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">
  <title>Chart Demo Overview</title>
  <link href="resources/demoStyle.css" rel="stylesheet">
</head>

<body>
  <div style="margin-top: 0.9em">
    <a class="overview_page_title">Demo Overview</a>
    <div class="overallPanel1">
      <a class="overview_chart_title">Trellis</a>
      <br>
      <div class="picPanel">
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_bar">Trellis Chart</a>
        </div>
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/horizontal_line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_stacked_bar">Trellis Stacked Bar Chart</a>
        </div>
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/horizontal_line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_line">Trellis Line Chart</a>
        </div>
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/horizontal_line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_pie">Trellis Pie Chart</a>
        </div>
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/horizontal_line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_donut">Trellis Donut Chart</a>
        </div>
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/horizontal_line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_combination">Trellis Combined Column Line Chart</a>
        </div>
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/horizontal_line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_horizontal_combination">Trellis Combined Bar Line Chart</a>
        </div>
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/horizontal_line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_bubble">Trellis Combined Bubble Chart long text for this div</a>
        </div>
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/horizontal_line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_scatter">Trellis Combined Scatter Chart</a>
        </div>
        <div class="pic_small_container">
          <img class="pic_small" src="resources/svg/horizontal_line.svg">
          <br>
          <a class="demo_illus" href="index.html?chartType=trellis_area">Trellis  Area Chart</a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

关于html - 由于文本换行 (css)，Div 位置发生了变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30836882/

25 4 0
文章推荐： 使用 Backdrop JS 进行 CSS 视觉回归测试 - 无法运行 grunt :reference or grunt:test
文章推荐： javascript - Bootstrap 模式中的 Rails link_to
文章推荐： javascript - 在网络 worker 中访问 Angular $Scope
文章推荐： javascript - 单击某些屏幕上未显示的元素的“单击” MouseEvent
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com