Question

我查看了StackOverflow的一些解决方案，到目前为止，它们都没有工作。我试图让我的跨度紧紧围绕它的内部div，但它总是比里面的div更宽一点。我尝试过不同的DISPLAY，FLOAT，MARGIN和PADDING属性而没有运气。

#column1, #column2, #column3
{
  display:block;
  float:left;
  width:33%;
  height:100vh;
  text-align:center;
  border: 1px solid black;
}

#weather_header
{
  width:70%;
  border: 5px outset skyblue;
  background-color: skyblue;
  color: white;
}

#weather_body
{
  width:70%;
  border: 5px inset skyblue;
  background-color: lightblue;
  color: black;
}

#clock_header
{
  width:70%;
  border: 5px outset skyblue;
  background-color: skyblue;
  color: white;
}

#clock_body
{
  width:70%;
  border: 5px inset skyblue;
  background-color: lightblue;
  color: black;
}

div.widget_box
{
  display: inline-block;
  border: 1px solid black;
}

div.widget_header
{
  float:left;
  text-align:left;
  padding: 5px 10px;
  display:inline-block;
  border-radius:8px 8px 0 0;
  font-weight:bold;
}

div.widget_body
{
  float: left;
  padding: 10px;
  display: inline-block;
  border-radius: 0 0 8px 8px;
  text-align:center;
  margin: 0 auto;
}

body {height:100vh;}
html {height:100vh;}

基本上，widget_box类包含标题和正文类。我只想让span的宽度与div框的宽度相匹配（它将包含不同大小的小部件）。

非常感谢您提供的任何帮助！

修改：HTML代码

<html>

<head>
 <title>Dashboard </title>

 <!--Importing JQuery into page-->
 <script type="text/javascript" src="jquery-1.7.2.js"></script>

 <!--Importing Stylesheet into page-->
 <link type="text/css" href="dashboard_stylesheet.css" rel="stylesheet"></link>

</head>

<body bgcolor = "white">

<div id="column1">

    <div class="widget_box">

        <div class="widget_header" id="weather_header">Weather</div>

        <div class="widget_body" id="weather_body">
            <script type="text/javascript" src="http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=whteYell&logo=1&zipcode=73127&lang=eng&size=9&theme=blue&metric=0&target=_self"></script>
        </div>

    </div>

    <div class="widget_box">

        <div class="widget_header" id="clock_header">World Clock</div>

        <div class="widget_body" id="clock_body">

            <div align="center" style="margin:15px 0px 0px 0px;background:#000000;width:200px;padding:12px">

                <noscript>
                    <div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold">
                    <a style="padding:2px 1px;margin:2px 1px;font-size:12px;line-height:16px;font-family:arial;text-decoration:none;color:#000" href="http://localtimes.info">World Time </a>
                    </div>
                </noscript>
            <script type="text/javascript" src="http://localtimes.info/world_clock.php?widget_number=11002&cp3_Hex=FF0000&cp2_Hex=000000&cp1_Hex=FFFFFF"></script>

            </div>

        </div>

    </div>

</div>

<div id="column2">Column 2</div>
<div id="column3">Column 3</div>

</body>

</html>

Answer 1

确定。首先，要回答您的问题，您的问题就在这里：span.widget_box{margin:3px;}

改为：http://jsfiddle.net/n6fpS/

span.widget_box{
display: inline-block;
margin: 0;
border: 1px solid black;
}

其次，正如@danielepolencic所说，由于他提到的原因，它的结构很差，无法将div放入跨度。

这是你想要的吗？ http://jsfiddle.net/n6fpS/2/如果没有，我认为您应该发布另一个问题并考虑链接到最终目标的图像表示或线框。现在看来你问一个单独的问题，并且你正在努力从根本上理解CSS。我认为花一个小时来完成这样的在线教程会对您有所帮助：http://www.tutorialspoint.com/css/index.htm。此外，我建议使用firebug或chrome开发人员工具检查代码（右键单击，检查元素），因为它允许您实时进行更改并查看工作原理。

HTML：无法让DIV紧紧围绕内部div

1 个答案: