Question

在我的“ArticlesBar”专栏中，我无法摆脱我在HTML表格中呈现的每个div之间的空格。在这一列中，我有一个滚动条的div和另外3个div用于标题正文和新闻文章的日期。在每个div之间我有一个间距。有关如何删除它的任何想法？

这个小提琴会有所帮助：http://jsfiddle.net/3TseC/ 请检查小提琴中的左栏 HTml代码：

<table class="homepage_table">
    <tr>
        <td id="Articlesbar" width="20%">
            <div width="20%">
                <%@include file="newsData.jsp" %>
            </div>
        </td>


        <td id="about_td" width="80%">
            <div class="fadein">
                <img src="imp.gif">
                <img src="http://thefinancialbrand.com/wp-content/uploads/2008/08/tagline-tagcloud.gif">
                <img src="slogan1.gif">

            </div>

            <div id="about_text" width="100%" height="100px">
                Founded in 1992 as a Finance and Securities Company,
                Imperia Bank converted into a fully fledged commercial bank in January 1996.
                Since then the bank has had a long standing tradition of achieving strong financial performance and carrying out
                expansion strategies while successfully focusing on efficient client service delivery.<br><br>
                Over the last 20 years, Imperia Bank has achieved a sustained growth in our customer deposit base which is largely attributed to the level of confidence our customers have in the bank and our corporate strategy.
                Currently we have 23 branches in our expanding branch network across major towns and cities.<br><br>
                Imperial Bank will continue to enhance the existing risk management parameters through the effective use of our newly installed and cutting edge core banking system.
                As part of our growth strategy, we are also continuing to recruit qualified professional staff, and providing appropriate training to our existing human resources to ensure we continue to meet evolving customer demands.
            </div>
        </td>
    </tr>
</table>

另一个html（从jsp文件导入，我实际上是使用来自MySql的导入数据，但为了显示我使用常规文本insid div的问题）：

<div id= "newsHeader">this is a header</div>
<div id = "newsBody">this is the body</div>
<div id = "newsDate">this is the date</div>

CSS代码：

.homepage_table {
    border: 250;
    width: 100%;
    height: 600px;
    margin: auto;
}

.homepage_table td {
    border: 0;
}

#about_td {
    background-image: url('http://www.promenadd.com/en/wp-content/uploads/2013/04/promenadd_grey_background.jpg');
    background-repeat: no-repeat;
    background-size: 110%;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-weight: bold;
}

#about_text {
    padding-right: 50px;
    padding-left: 50px;
    color: steelblue;
}

#Articlesbar {
    height: 50px;
}

#Articlesbar div {
    overflow-y: scroll;
    height: 100%;
    margin: 0;
}

#newsHeader {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    color: steelblue;
    font-weight: bold;
    font-size: 20px;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    height: 20px;
    margin: 0;
}

#newsBody {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    color: red;
    font-size: 14px;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    margin: 0;
    height: 20px;
}

#newsDate {
    margin: 0;
    width: 100%;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 14px;
    padding-right: 10px;
    padding-left: 10px;
    height: 20px;
}

Answer 1

当然不用担心

如果我正确地假设您不希望

之间存在巨大的空白区域，那么您需要做的就是

<div id= "newsHeader">this is a header</div>
<div id = "newsBody">this is the body</div>
<div id = "newsDate">this is the date</div>

元素是替换css选择器

#Articlesbar div

带

#Articlesbar > div

这个选择器意味着只有#Articlesbar的直接后代才能获得风格的属性。

现在其他三个div的高度也设置为100％。

re-re updated fiddle

Answer 2

您的#articlesbar高度为50px。并且你将所有div放在100％的高度内，因此是间距。

我清理了一下，试着再次从这里开始： http://jsfiddle.net/3TseC/3/

为什么你还在使用表格，它们似乎只是让你想要的东西变得更复杂。我只想设置一个包含完整文章的div，如果你想添加子div来显示标题，内容等。

另外，使用像margin:0px;

这样的CSS边距

Html表列中div之间的不需要的间距

2 个答案: