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 クラスは header クラスと body クラスを保持します。スパンの幅を 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

Ok。まず、あなたの質問に答えるために、あなたの問題はここにあります：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のようなオンライン チュートリアルに 1 時間費やすことは有益だと思います。また、firebug または chrome 開発者ツール (右クリック、要素の検査) を使用してコードを検査することをお勧めします。これにより、リアルタイムで変更を加えて、どのように機能するかを確認できます。

于 2013-08-12T21:42:35.177 に答える