Question

我遇到了一些问题，试图让这两个div在浏览器中有空间时彼此相邻，但当调整大小时，它们会相互坐在一起。目前，当他们用完房间时，他们最终会重叠

http://www.techagesite.com/page-1work11122.htm

`

css

.container3 {
width: 100%;

}
.left-column3 {
width: 50%;
float:left;
}
.right-column3 {
width:45%;
float:left;
}

html

<div class = "container3">
          <div class="left-column3" ><!-- Begin MailChimp Signup Form -->
<link href="unsaved://cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#0F3053; border: 2px solid #0D3161; clear:left; font:14px Helvetica,Tekton pro;  width:200px;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
              </style>
<div id="mc_embed_signup">
<form action="http://techagesite.us7.list-manage.com/subscribe/post?u=44c8ba9e80cfbb3aa7fae3b4d&amp;id=9a6386011a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <hr color="#FFCC00">
Subscribe For Free Mobile Stuff

<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" size="20">
</div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>  <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
</div>
<!--End mc_embed_signup--></div><div class="right-column3" style="border: 2px solid #0D3161;">
<script async src="file://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 125 125 new -->
<ins class="adsbygoogle"
     style="display:inline-block;width:125px;height:125px"
     data-ad-client="ca-pub-2873697026320753"
     data-ad-slot="8526185658"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

`

Answer 1

.container3 {
    width: 100%;
}
.left-column3 {
    width: 90%;
}
.right-column3 {
    width: 90%;
}
/************responsive web design of 1024*************/
@media only screen and (min-width:1024px) {
 .left-column3 {
    width: 50%;
    float:left;
 }
 .right-column3 {
    width:45%;
    float:left;
 }
}

/ 我相信它会对你有帮助 /

Answer 2

试试吧......

 input {
            max-width: 100%;
        }

        #mc_embed_signup {
            background: #0F3053;
            border: 2px solid #0D3161;
            clear: left;
            font: 14px Helvetica, Tekton pro;
            width: 200px;
            max-width: 80%;
        }

浏览器重叠的Div重叠

2 个答案: