内容溢出在 div 之外



>我有 4 个块,它有一些内容,它们都溢出了文本,所以我使用

overflow:hidden

工作正常,但是当我们删除此行时,它清楚地表明文本在<div>外溢出,因为我使用选框滚动内容,内容实际上出现在<div>

我的小提琴:https://jsfiddle.net/qtdod55s/

.leftcolumn {
  background-color:darkgrey;
  height:320px;
  padding:10px;
  margin:10px;
  border-color:black;
  border-style:solid;
  border-width:thin;
  color:white;
  overflow:hidden;
}
.rightcolumn {
  padding:10px;
  height:320px;
  margin:10px;
  border-color:black;
  border-style:solid;
  border-width:thin;
  color:white;
  /*overflow:hidden;*/
  display: inline-block;
}
#tv {
  background-color:black;
  margin:10px;
  height:200px;
  margin-bottom:2px;
}
#weather {
  background-color:darkgrey;
  margin:10px;
  height:120px;
  margin-top:1px;
  border-color:black;
  border-style:solid;
  border-width:thin;
}
#wethericon {
  font-size:100px;
  margin:10px;
  color:yellow;
}
body {
  font-size:18px;
  font-family:'Open Sans', sans-serif;
}
p {
  height:100%;
}
thead {
  background-color:green;
}
tbody {
  background-color:silver;
  color:black;
}
.table-responsive {
  margin-top:5px;
  margin-bottom:5px;
}
.h3, h3 {
  color:red;
  /*font-weight:bold;*/
  margin-bottom:10px;
  margin-top:10px;
}
<body>
<div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-7 leftcolumn">
      <marquee behavior="scroll" direction="up" scrollamount="2">
        <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
    </div>
    <div class="col-md-4 rightcolumn">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/XnwYWcA5ULk" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
<div class="row">
  <div class="col-md-7 leftcolumn">
  <marquee behavior="scroll" direction="up" scrollamount="2">
    <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  </div>
<div class="col-md-4 rightcolumn">
<marquee behavior="scroll" direction="up" scrollamount="2">
    <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
    to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
    <h3>Pending Inspection Checklist</h3>
    <div class="table-responsive">
        <table class="table" id="ins-checklist">
            <thead>
                <tr>
                    <th>Team Name</th>
                    <th>Total </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <h3>Pending Work Completion Report</h3>
    <div class="table-responsive">
        <table class="table" id="work-completion">
            <thead>
                <tr>
                    <th>Team Name</th>
                    <th>Total </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</marquee>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/ajaxcalls.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

将以下代码添加到 css 对我来说效果很好

marquee {
  height: 100%;
}

最新更新