HTML:Can'；不要让DIV紧紧缠绕在内部DIV上_Html_Css

HTML:Can'；不要让DIV紧紧缠绕在内部DIV上

html css

HTML:Can'；不要让DIV紧紧缠绕在内部DIV上,html,css,Html,Css,我在StackOverflow周围寻找了一些解决方案，但到目前为止，没有一个有效。我试图让我的跨度紧紧包裹在它的内部凹槽上，但它总是比里面的凹槽宽一点。我尝试了不同的显示、浮动、边距和填充属性，但没有成功 #column1, #column2, #column3 { display:block; float:left; width:33%; height:100vh; text-align:center; border: 1px solid black; } #wea

我在StackOverflow周围寻找了一些解决方案，但到目前为止，没有一个有效。我试图让我的跨度紧紧包裹在它的内部凹槽上，但它总是比里面的凹槽宽一点。我尝试了不同的显示、浮动、边距和填充属性，但没有成功

#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类包含header和body类。我只希望跨度的宽度与div框的宽度相匹配（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>


仪表板
天气
世界时钟
第2栏
第3栏

好的。首先，要回答您的问题，您的问题是：

span.widget_box{margin:3px；}

改为这样做：

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

这就是你想要的吗？如果不是，我认为您应该发布另一个问题，并考虑链接到您的最终目标的图像表示或线框。你现在似乎在问一个单独的问题，而你正在努力从根本上理解CSS。我认为花一个小时阅读这样的在线教程对你会有好处。此外，我建议您使用firebug或chrome开发工具（右键单击，inspect元素）检查代码，因为它允许您实时进行更改并查看工作情况

请添加您的html…js提琴会很好。值得指出的是，

元素不应该包装

元素。您可能知道，第一个是内联元素，而后者是块元素。我还没有使用任何JS——只是格式化页面。最初我试着只使用div，但那不起作用，一些人建议使用span来处理类似的事情。这让我发疯了>\u>好吧，我更新了代码，去掉了margin属性，并将span改为div，但这并不能解决问题：-\btw，我不知道jsfiddle.net——这太酷了。我可以通过将内部div设为浮动中心而不是左侧来居中，但我仍然在小部件框的两侧有空白。有没有办法把它关上一点？

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