0

我在 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 类包含标题和正文类。我只希望跨度的宽度与 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>
4

1 回答 1

0

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

改为这样做：http: //jsfiddle.net/n6fpS/

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

其次，正如@danielepolencic 所说，由于他提到的原因，将 div 放在 span 内的结构很差。

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

于 2013-08-12T21:42:35.177 回答