1

I have a main DIV, and some buttons within that DIV. I want the buttons to be cut off when they go off the edge of the DIV (like this image here, where the blue is the body, the light grey is the div and the dark grey are the buttons.)

How can I do this?

enter image description here

My HTML:

<body style="background-color: blue;">
    <div id="container">
        <button style="position: absolute; left:-50px; width:150px; height:50px;">Button</button>
    </div>
</body>
4

2 回答 2

3

Add the below css to your wrapper div

#wrapperDiv{overflow:hidden;}
于 2014-09-17T16:56:26.290 回答
1

As suggested by Keith in the comments, just use overflow: hidden;. (See snippet.)

.hide-buttons {
  
  overflow: hidden;
  position: relative;
  height: 100px;
  width: 300px;
  background-color: lightblue;
  margin: 0 auto;

}

.top-button {

    position: absolute;
    min-width: 30%;
    top: 25%;
    left: 35%;

}

.left-button {
  
  position: absolute;
  left: -10px;
  bottom: 20px;
  
}

.right-button {
  
  position: absolute;
  right: -10px;
  bottom: 20px;
  
}
<div>
<div class="hide-buttons">
  
  <input type="button" value="Top Button" class="top-button">
  <input type="button" value="Left Button" class="left-button">
  <input type="button" value="Right Button" class="right-button">
  
</div>  
</div>

于 2014-09-17T17:00:31.580 回答