Question

如果图像及其边框没有超出侧边栏，我将无法添加它们。您可以通过访问JSFiddle https://jsfiddle.net/8p9m27an/5/

来了解我的意思。

请注意，我不允许更改HTML。

我最大的困惑是如何使边框，内边距，边距等适合边栏。我使用了width: 100%，但我想那只是用于图像本身。有什么选择可以使所有提及的内容都占据侧边栏的100％，而不仅仅是图像本身？

我知道我可以将width设置为9x％，但这似乎不是合适的解决方案。我觉得CSS会有一种“理解”的方法，我试图使所有内容都适合并占用边栏100％的宽度，包括所有元素（填充px，边框px，边距px等）。

我当前的CSS：

CSS：

/*This is the class, .left, of the sidebar, 
which is an <aside> in the HTML. The img's are image links.*/

.left img {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
  padding: 5px;
  margin: 5px;
  background-color: #fff;*/
}

.left {
  width: 15%;
  background-color: #111;
  overflow-x: scroll; /*I know I could simply cut off overflow, but
    instead I want to have everything contained */
  float: left;
}

/*body text*/ section {
  max-width: 85%;
  background-color: rgb(0, 255, 242);
}

a {
  background-color: rgb(0, 4, 255);
  color: white;
}

body {
  padding: 1em;
  margin: 1em;
}

我的HTML：

<main>
  <aside class = "left">
    <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/>Image 1</a>
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/>Image 2</a>
<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee">Image 3</a>
</aside>
<section class = "right">
<h2>Watch your Head </h2>
<p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something hard to ignore in many Midwestern college towns.  Students (and people who wish they were still students) spend the few briefs months of good weather, sprinting down fields, hurling frisbees, and yelling "Stack!!".</p>
                <p>What I find much more entertaining is the large number of people who continue to play when the weather gets windy and the night sky darkens around oh....4:15pm.  The sight of frisbees boomeranging in the wind is topped only by the knowledge that even when you can't seem, those same plastic discs of death are probably hurtling through the dark night sky at 8 or 9 o'clock in the evening.
                </p>
                <p>Ultimate Frisbee requires a great deal of stamina and dexterity.  Not surprisingly, the <abbr title = "International Olympic Committee">IOC</abbr> officially recognized Ultimate as a sport in 2015.   It can go up against other sports for inclusion in  Olympic games.</p>
            </section>
        </main>

Answer 1

您可以使用以下调整

        myEditText.addTextChangedListener(new TextWatcher() {
        boolean bIgnore = false; // indicates if the change was made by the TextWatcher itself.

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }

        @Override
        public void afterTextChanged(Editable s) {
            if (bIgnore)
                return;

            bIgnore = true; // prevent infinite loop

            if (inputValidated(myEditText.getText().toString()) {
                alertDialog.getButton(AlertDialog.BUTTON_POSITIVE).setEnabled(true);
                alertDialog.getButton(AlertDialog.BUTTON_POSITIVE).setVisibility(View.VISIBLE);
                errorTextView.setVisibility(View.INVISIBLE);

            } else {
                alertDialog.getButton(AlertDialog.BUTTON_POSITIVE).setEnabled(false);
                alertDialog.getButton(AlertDialog.BUTTON_POSITIVE).setVisibility(View.INVISIBLE);
                errorTextView.setVisibility(View.VISIBLE);

            }

            bIgnore = false; // release, so the TextWatcher start to listen again.
        }
    });

使边框/填充物不增加宽度，而吃。
（https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing）

然后

* {box-sizing: border-box;}

这样aside.left a { display: block; max-width: 100%; }内部的链接不会溢出其容器。

最后

aside

使图像的容器100％减去左右边距。
（https://developer.mozilla.org/en-US/docs/Web/CSS/calc）

更新的小提琴：https://jsfiddle.net/wfhjs4ck/1/

如何防止图像及其填充和边距溢出边栏？

1 个答案: