1

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;
}

text file test.txt:

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

I would like the output to look like:

Please choose a parameter: option menu from test.txt here

Right now, the option menu is appearing under the text. I have tried display: inline; but that broke it. I'm sure this is a quick fix but I am new to jQuery and CSS.

4

1 回答 1

1

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

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

于 2014-01-18T18:21:23.130 回答