Question

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Culminating</title>
    <link href="style.css" rel="stylesheet" type="text/css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="./javascript.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false"></script>

    <script>
        <!-- Calling the Google Maps API -->
    </script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <div id="parameters">
                <h4>Please choose a parameter:</h4>
                <script>
                    $.get('./test.txt', function(data) {
                        $("#parameters").append(data);
                    }, 'text');
                </script>
                <?php //include("test.html") ?>
            </div>
        </div>
    </div>
</body>

的style.css

.content {
    border-style: solid;
    border-color: black;
    border-width: 15px;
}

#parameters  {
    background-color: #ffcc00;
    margin: 0px;
}

#bottom_pane_options {
    position: absolute;
    top: 70%;
    bottom: 0;
    right: 20%;
    left: 0;
    background-color: #FAFAFA;
}

文本文件test.txt：

<select>
    <option value="1">Parameter 1</option>
    <option value="2">Parameter 2</option>
    <option value="3">Parameter 3</option>
</select>

我希望输出看起来像：

请选择参数：option menu from test.txt here

现在，选项菜单出现在文本下方。我试过display: inline;但是打破了它。我确定这是一个快速解决方法，但我是jQuery和CSS的新手。

Answer 1

尝试将h4元素浮动到左侧。这会打破容器，所以使用下面链接的代码清除容器。忘了提一下，你必须给h4元素一个特定的宽度，因为它是一个块级元素，并且会占用所需的宽度（即使它意味着占用整行）。内联块应该已经解决了，但宽度可能是一个问题。

http://www.lswebapps.com/code-snippet/css-clearfix/

如何使用jQuery在div中添加文本内容？

1 个答案: